Minor docs improvement

...which need to also be turned into a changenote

bin/build-site.sh

@@ -120,7 +120,6 @@ node $TW5_BUILD_TIDDLYWIKI \
 	|| exit 1
 
 # /empty.html					Empty
-# /empty.hta					For Internet Explorer
 # /empty-external-core.html		External core empty
 # /tiddlywikicore-<version>.js	Core plugin javascript
 node $TW5_BUILD_TIDDLYWIKI \

boot/boot.js

@@ -316,8 +316,25 @@ $tw.utils.htmlDecode = function(s) {
 	return s.toString().replace(/&lt;/mg,"<").replace(/&nbsp;/mg,"\xA0").replace(/&gt;/mg,">").replace(/&quot;/mg,"\"").replace(/&amp;/mg,"&");
 };
 
-/** @deprecated Use window.location.hash instead.  */
-$tw.utils.getLocationHash = () => window.location.hash;
+/*
+Get the browser location.hash. We don't use location.hash because of the way that Firefox auto-urldecodes it (see http://stackoverflow.com/questions/1703552/encoding-of-window-location-hash)
+*/
+$tw.utils.getLocationHash = function() {
+	const href = window.location.href,
+		idx = href.indexOf("#");
+
+	if(idx === -1) {
+		return "#";
+	}
+
+	const afterHash = href.substring(idx + 1);
+	if(afterHash.startsWith("#") || afterHash.startsWith("%23")) {
+		// Special case: ignore location hash if it itself starts with a #
+		return "#";
+	}
+	return href.substring(idx);
+};
+
 
 /** @deprecated Pad a string to a given length with "0"s. Length defaults to 2 */
 $tw.utils.pad = function(value,length = 2) {
@@ -596,7 +613,7 @@ $tw.utils.evalGlobal = function(code,context,filename,sandbox,allowGlobals) {
 	// Compile the code into a function
 	var fn;
 	if($tw.browser) {
-		fn = window["eval"](code + "\n\n//# sourceURL=" + filename); // eslint-disable-line no-eval -- See https://github.com/TiddlyWiki/TiddlyWiki5/issues/6839
+		fn = Function("return " + code + "\n\n//# sourceURL=" + filename)(); // See https://github.com/TiddlyWiki/TiddlyWiki5/issues/6839
 	} else {
 		if(sandbox){
 			fn = vm.runInContext(code,sandbox,filename)

core-server/server/routes/get-tiddler-html.js

@@ -33,8 +33,8 @@ exports.handler = function(request,response,state) {
 		}
 		var text = state.wiki.renderTiddler(renderType,renderTemplate,{parseAsInline: true, variables: {currentTiddler: title}});
 
-		// Naughty not to set a content-type, but it's the easiest way to ensure the browser will see HTML pages as HTML, and accept plain text tiddlers as CSS or JS
-		state.sendResponse(200,{},text,"utf8");
+		var headers = {"Content-Type": renderType};
+		state.sendResponse(200,headers,text,"utf8");
 	} else {
 		response.writeHead(404);
 		response.end();

core-server/server/server.js

@@ -42,6 +42,8 @@ function Server(options) {
 	}
 	// Setup the default required plugins
 	this.requiredPlugins = this.get("required-plugins").split(',');
+	// Initialise CORS
+	this.corsEnable = this.get("cors-enable") === "yes";
 	// Initialise CSRF
 	this.csrfDisable = this.get("csrf-disable") === "yes";
 	// Initialize Gzip compression
@@ -261,6 +263,13 @@ Server.prototype.requestHandler = function(request,response,options) {
 	state.urlInfo = url.parse(request.url);
 	state.queryParameters = querystring.parse(state.urlInfo.query);
 	state.pathPrefix = options.pathPrefix || this.get("path-prefix") || "";
+	// Enable CORS
+	if(this.corsEnable) {
+		response.setHeader("Access-Control-Allow-Origin", "*");
+		response.setHeader("Access-Control-Allow-Headers", "*");
+		response.setHeader("Access-Control-Allow-Methods", "*");
+		response.setHeader("Access-Control-Expose-Headers", "*");
+	}
 	state.sendResponse = sendResponse.bind(self,request,response);
 	// Get the principals authorized to access this resource
 	state.authorizationType = options.authorizationType || this.methodMappings[request.method] || "readers";
@@ -285,6 +294,12 @@ Server.prototype.requestHandler = function(request,response,options) {
 		response.end();
 		return;
 	}
+	// Reply to OPTIONS
+	if(this.corsEnable && request.method === "OPTIONS") {
+		response.writeHead(204);
+		response.end();
+		return;
+	}
 	// Find the route that matches this path
 	var route = self.findMatchingRoute(request,state);
 	// Optionally output debug info

core/language/en-GB/ControlPanel.multids

@@ -6,6 +6,7 @@ Appearance/Caption: Appearance
 Appearance/Hint: Ways to customise the appearance of your TiddlyWiki.
 Basics/AnimDuration/Prompt: Animation duration
 Basics/AutoFocus/Prompt: Default focus field for new tiddlers
+Basics/AutoFocusEdit/Prompt: Default focus field for existing tiddlers
 Basics/Caption: Basics
 Basics/DefaultTiddlers/BottomHint: Use [[double square brackets]] for titles with spaces. Or you can choose to {{retain story ordering||$:/snippets/retain-story-ordering-button}}
 Basics/DefaultTiddlers/Prompt: Default tiddlers
@@ -57,11 +58,10 @@ LayoutSwitcher/Caption: Layout
 LoadedModules/Caption: Loaded Modules
 LoadedModules/Hint: These are the currently loaded tiddler modules linked to their source tiddlers. Any italicised modules lack a source tiddler, typically because they were setup during the boot process.
 Palette/Caption: Palette
-Palette/CustomSettings/Prompt: Custom settings for current palette: <<palette-link>>
 Palette/Editor/Clone/Caption: clone
 Palette/Editor/Clone/Prompt: It is recommended that you clone this shadow palette before editing it
 Palette/Editor/Delete/Hint: delete this entry from the current palette
-Palette/Editor/Names/External/Show: Show inherited palette entries
+Palette/Editor/Names/External/Show: Show color names that are not part of the current palette
 Palette/Editor/Prompt/Modified: This shadow palette has been modified
 Palette/Editor/Prompt: Editing
 Palette/Editor/Reset/Caption: reset

core/language/en-GB/Draft.multids

@@ -0,0 +1,4 @@
+title: $:/language/Draft/
+
+Attribution: Draft of '<<draft-title>>' by {{$:/status/UserName}}
+Title: Draft of '<<draft-title>>'

core/language/en-GB/Misc.multids

@@ -30,7 +30,6 @@ Error/DeserializeOperator/MissingOperand: Filter Error: Missing operand for 'des
 Error/DeserializeOperator/UnknownDeserializer: Filter Error: Unknown deserializer provided as operand for the 'deserialize' operator
 Error/Filter: Filter error
 Error/FilterSyntax: Syntax error in filter expression
-Error/FilterPragma: Filter Error: Unknown filter pragma
 Error/FilterRunPrefix: Filter Error: Unknown prefix for filter run
 Error/IsFilterOperator: Filter Error: Unknown parameter for the 'is' filter operator
 Error/FormatFilterOperator: Filter Error: Unknown suffix for the 'format' filter operator

core/language/en-GB/TiddlerInfo.multids

@@ -9,6 +9,7 @@ Advanced/ShadowInfo/NotShadow/Hint: The tiddler <$link to=<<infoTiddler>>><$text
 Advanced/ShadowInfo/Shadow/Hint: The tiddler <$link to=<<infoTiddler>>><$text text=<<infoTiddler>>/></$link> is a shadow tiddler
 Advanced/ShadowInfo/Shadow/Source: It is defined in the plugin <$link to=<<pluginTiddler>>><$text text=<<pluginTiddler>>/></$link>
 Advanced/ShadowInfo/OverriddenShadow/Hint: It is overridden by an ordinary tiddler
+Advanced/CascadeInfo/Heading: Cascade Details
 Fields/Caption: Fields
 List/Caption: List
 List/Empty: This tiddler does not have a list

core/modules/editor/engines/framed.js

@@ -31,7 +31,7 @@ function FramedEngine(options) {
 	this.parentNode.insertBefore(this.iframeNode,this.nextSibling);
 	this.iframeDoc = this.iframeNode.contentWindow.document;
 	// (Firefox requires us to put some empty content in the iframe)
-	var paletteTitle = this.widget.wiki.getTiddlerText("$:/palette/palette-colours");
+	var paletteTitle = this.widget.wiki.getTiddlerText("$:/palette");
 	var colorScheme = (this.widget.wiki.getTiddler(paletteTitle) || {fields: {}}).fields["color-scheme"] || "light";
 	this.iframeDoc.open();
 	this.iframeDoc.write("<!DOCTYPE html><html><head><meta name='color-scheme' content='" + colorScheme + "'></head><body></body></html>");

core/modules/editor/engines/simple.js

@@ -28,12 +28,7 @@ function SimpleEngine(options) {
 	if(this.widget.editTag === "textarea") {
 		this.domNode.appendChild(this.widget.document.createTextNode(this.value));
 	} else {
-		if(this.widget.editType === "color") {
-			// The <input type="color"> element requires a six digit hex value
-			this.domNode.value = $tw.utils.convertCSSColorToRGBString(this.value);
-		} else {
-			this.domNode.value = this.value;
-		}
+		this.domNode.value = this.value;
 	}
 	// Set the attributes
 	if(this.widget.editType && this.widget.editTag !== "textarea") {
@@ -88,9 +83,6 @@ Update the DomNode with the new text
 */
 SimpleEngine.prototype.updateDomNodeText = function(text) {
 	try {
-		if(this.widget.editType === "color") {
-			text = $tw.utils.convertCSSColorToRGBString(text);
-		}
 		this.domNode.value = text;
 	} catch(e) {
 		// Ignore

core/modules/editor/factory.js

@@ -48,8 +48,8 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 			this.toolbarNode = this.document.createElement("div");
 			this.toolbarNode.className = "tc-editor-toolbar";
 			parent.insertBefore(this.toolbarNode,nextSibling);
-			this.renderChildren(this.toolbarNode,null);
 			this.domNodes.push(this.toolbarNode);
+			this.renderChildren(this.toolbarNode,null);
 		}
 		// Create our element
 		var editInfo = this.getEditInfo(),
@@ -217,10 +217,12 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 	EditTextWidget.prototype.refresh = function(changedTiddlers) {
 		var changedAttributes = this.computeAttributes();
 		// Completely rerender if any of our attributes have changed
-		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedTiddlers["$:/palette"] || changedAttributes.disabled || changedAttributes.fileDrop) {
+		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || changedAttributes["class"] || changedAttributes.placeholder || changedAttributes.size || changedAttributes.autoHeight || changedAttributes.minHeight || changedAttributes.focusPopup ||  changedAttributes.rows || changedAttributes.tabindex || changedAttributes.cancelPopups || changedAttributes.inputActions || changedAttributes.refreshTitle || changedAttributes.autocomplete || changedTiddlers[HEIGHT_MODE_TITLE] || changedTiddlers[ENABLE_TOOLBAR_TITLE] || changedTiddlers["$:/palette"] || changedAttributes.disabled || changedAttributes.fileDrop) {
 			this.refreshSelf();
 			return true;
-		} else if(changedAttributes["default"] || changedTiddlers[this.editRefreshTitle] || changedTiddlers[this.editTitle]) {
+		} else if (changedTiddlers[this.editRefreshTitle]) {
+			this.engine.updateDomNodeText(this.getEditInfo().value);
+		} else if(changedTiddlers[this.editTitle]) {
 			var editInfo = this.getEditInfo();
 			this.updateEditor(editInfo.value,editInfo.type);
 		}

core/modules/filters.js

@@ -88,8 +88,8 @@ function parseFilterOperation(operators,filterString,p) {
 						rexMatch = rex.exec(filterString.substring(p));
 					if(rexMatch) {
 						operator.regexp = new RegExp(rexMatch[1], rexMatch[2]);
-						// DEPRECATION WARNING
-						console.log("WARNING: Filter",operator.operator,"has a deprecated regexp operand",operator.regexp);
+	// DEPRECATION WARNING
+	console.log("WARNING: Filter",operator.operator,"has a deprecated regexp operand",operator.regexp);
 						nextBracketPos = p + rex.lastIndex - 1;
 					}
 					else {
@@ -146,16 +146,14 @@ exports.parseFilter = function(filterString) {
 		match;
 	var whitespaceRegExp = /(\s+)/mg,
 		// Groups:
-		// 1 - pragma
-		// 2 - pragma suffix
-		// 3 - entire filter run prefix
-		// 4 - filter run prefix name
-		// 5 - filter run prefix suffixes
-		// 6 - opening square bracket following filter run prefix
-		// 7 - double quoted string following filter run prefix
-		// 8 - single quoted string following filter run prefix
-		// 9 - anything except for whitespace and square brackets
-		operandRegExp = /(?:::(\w+)(?:\:(\w+))?(?=\s|$)|((?:\+|\-|~|(?:=>?)|:(\w+)(?:\:([\w\:, ]*))?)?)(?:(\[)|(?:"([^"]*)")|(?:'([^']*)')|([^\s\[\]]+)))/mg;
+		// 1 - entire filter run prefix
+		// 2 - filter run prefix itself
+		// 3 - filter run prefix suffixes
+		// 4 - opening square bracket following filter run prefix
+		// 5 - double quoted string following filter run prefix
+		// 6 - single quoted string following filter run prefix
+		// 7 - anything except for whitespace and square brackets
+		operandRegExp = /((?:\+|\-|~|(?:=>?)|\:(\w+)(?:\:([\w\:, ]*))?)?)(?:(\[)|(?:"([^"]*)")|(?:'([^']*)')|([^\s\[\]]+))/mg;
 	while(p < filterString.length) {
 		// Skip any whitespace
 		whitespaceRegExp.lastIndex = p;
@@ -172,23 +170,18 @@ exports.parseFilter = function(filterString) {
 			};
 			match = operandRegExp.exec(filterString);
 			if(match && match.index === p) {
+				// If there is a filter run prefix
 				if(match[1]) {
-					// If there is a filter pragma
-					operation.pragma = match[1];
-					operation.suffix = match[2];
-					p = match.index + match[0].length;
-				} else if(match[3]) {
-					// If there is a filter run prefix
-					operation.prefix = match[3];
+					operation.prefix = match[1];
 					p = p + operation.prefix.length;
 					// Name for named prefixes
-					if(match[4]) {
-						operation.namedPrefix = match[4];
+					if(match[2]) {
+						operation.namedPrefix = match[2];
 					}
 					// Suffixes for filter run prefix
-					if(match[5]) {
+					if(match[3]) {
 						operation.suffixes = [];
-						$tw.utils.each(match[5].split(":"),function(subsuffix) {
+						$tw.utils.each(match[3].split(":"),function(subsuffix) {
 							operation.suffixes.push([]);
 							$tw.utils.each(subsuffix.split(","),function(entry) {
 								entry = $tw.utils.trim(entry);
@@ -200,7 +193,7 @@ exports.parseFilter = function(filterString) {
 					}
 				}
 				// Opening square bracket
-				if(match[6]) {
+				if(match[4]) {
 					p = parseFilterOperation(operation.operators,filterString,p);
 				} else {
 					p = match.index + match[0].length;
@@ -210,9 +203,9 @@ exports.parseFilter = function(filterString) {
 				p = parseFilterOperation(operation.operators,filterString,p);
 			}
 			// Quoted strings and unquoted title
-			if(match[7] || match[8] || match[9]) { // Double quoted string, single quoted string or unquoted title
+			if(match[5] || match[6] || match[7]) { // Double quoted string, single quoted string or unquoted title
 				operation.operators.push(
-					{operator: "title", operands: [{text: match[7] || match[8] || match[9]}]}
+					{operator: "title", operands: [{text: match[5] || match[6] || match[7]}]}
 				);
 			}
 			results.push(operation);
@@ -237,30 +230,23 @@ exports.getFilterRunPrefixes = function() {
 	return this.filterRunPrefixes;
 }
 
-exports.filterTiddlers = function(filterString,widget,source,options) {
-	var fn = this.compileFilter(filterString,options);
-	try {
-		const fnResult = fn.call(this,source,widget);
-		return fnResult;
-	} catch(e) {
-		return [`${$tw.language.getString("Error/Filter")}: ${e}`];
-	}
+exports.filterTiddlers = function(filterString,widget,source) {
+	var fn = this.compileFilter(filterString);
+	return fn.call(this,source,widget);
 };
 
 /*
-Compile a filter into a function with the signature fn(source,widget,options) where:
+Compile a filter into a function with the signature fn(source,widget) where:
 source: an iterator function for the source tiddlers, called source(iterator), where iterator is called as iterator(tiddler,title)
 widget: an optional widget node for retrieving the current tiddler etc.
 */
-exports.compileFilter = function(filterString,options) {
-	var defaultFilterRunPrefix = (options || {}).defaultFilterRunPrefix || "or";
-	var cacheKey = filterString + "|" + defaultFilterRunPrefix;
+exports.compileFilter = function(filterString) {
 	if(!this.filterCache) {
 		this.filterCache = Object.create(null);
 		this.filterCacheCount = 0;
 	}
-	if(this.filterCache[cacheKey] !== undefined) {
-		return this.filterCache[cacheKey];
+	if(this.filterCache[filterString] !== undefined) {
+		return this.filterCache[filterString];
 	}
 	var filterParseTree;
 	try {
@@ -328,20 +314,19 @@ exports.compileFilter = function(filterString,options) {
 
 				// Invoke the appropriate filteroperator module
 				results = operatorFunction(accumulator,{
-					operator: operator.operator,
-					operand: operands.length > 0 ? operands[0] : undefined,
-					operands: operands,
-					multiValueOperands: multiValueOperands,
-					isMultiValueOperand: isMultiValueOperand,
-					prefix: operator.prefix,
-					suffix: operator.suffix,
-					suffixes: operator.suffixes,
-					regexp: operator.regexp
-				},{
-					wiki: self,
-					widget: widget,
-					defaultFilterRunPrefix: defaultFilterRunPrefix
-				});
+							operator: operator.operator,
+							operand: operands.length > 0 ? operands[0] : undefined,
+							operands: operands,
+							multiValueOperands: multiValueOperands,
+							isMultiValueOperand: isMultiValueOperand,
+							prefix: operator.prefix,
+							suffix: operator.suffix,
+							suffixes: operator.suffixes,
+							regexp: operator.regexp
+						},{
+							wiki: self,
+							widget: widget
+						});
 				if($tw.utils.isArray(results)) {
 					accumulator = self.makeTiddlerIterator(results);
 				} else {
@@ -361,45 +346,29 @@ exports.compileFilter = function(filterString,options) {
 		var filterRunPrefixes = self.getFilterRunPrefixes();
 		// Wrap the operator functions in a wrapper function that depends on the prefix
 		operationFunctions.push((function() {
-			if(operation.pragma) {
-				switch(operation.pragma) {
-					case "defaultprefix":
-						defaultFilterRunPrefix = operation.suffix || "or";
-						break;
-					default:
+			var options = {wiki: self, suffixes: operation.suffixes || []};
+			switch(operation.prefix || "") {
+				case "": // No prefix means that the operation is unioned into the result
+					return filterRunPrefixes["or"](operationSubFunction, options);
+				case "=": // The results of the operation are pushed into the result without deduplication
+					return filterRunPrefixes["all"](operationSubFunction, options);
+				case "-": // The results of this operation are removed from the main result
+					return filterRunPrefixes["except"](operationSubFunction, options);
+				case "+": // This operation is applied to the main results so far
+					return filterRunPrefixes["and"](operationSubFunction, options);
+				case "~": // This operation is unioned into the result only if the main result so far is empty
+					return filterRunPrefixes["else"](operationSubFunction, options);
+				case "=>": // This operation is applied to the main results so far, and the results are assigned to a variable
+					return filterRunPrefixes["let"](operationSubFunction, options);
+				default: 
+					if(operation.namedPrefix && filterRunPrefixes[operation.namedPrefix]) {
+						return filterRunPrefixes[operation.namedPrefix](operationSubFunction, options);
+					} else {
 						return function(results,source,widget) {
 							results.clear();
-							results.push($tw.language.getString("Error/FilterPragma"));
+							results.push($tw.language.getString("Error/FilterRunPrefix"));
 						};
-				}
-				return function(results,source,widget) {
-					// Dummy response
-				};
-			} else {
-				var options = {wiki: self, suffixes: operation.suffixes || []};
-				switch(operation.prefix || "") {
-					case "": // Use the default filter run prefix if none is specified
-						return filterRunPrefixes[defaultFilterRunPrefix](operationSubFunction, options);
-					case "=": // The results of the operation are pushed into the result without deduplication
-						return filterRunPrefixes["all"](operationSubFunction, options);
-					case "-": // The results of this operation are removed from the main result
-						return filterRunPrefixes["except"](operationSubFunction, options);
-					case "+": // This operation is applied to the main results so far
-						return filterRunPrefixes["and"](operationSubFunction, options);
-					case "~": // This operation is unioned into the result only if the main result so far is empty
-						return filterRunPrefixes["else"](operationSubFunction, options);
-					case "=>": // This operation is applied to the main results so far, and the results are assigned to a variable
-						return filterRunPrefixes["let"](operationSubFunction, options);
-					default: 
-						if(operation.namedPrefix && filterRunPrefixes[operation.namedPrefix]) {
-							return filterRunPrefixes[operation.namedPrefix](operationSubFunction, options);
-						} else {
-							return function(results,source,widget) {
-								results.clear();
-								results.push($tw.language.getString("Error/FilterRunPrefix"));
-							};
-						}
-				}
+					}
 			}
 		})());
 	});
@@ -438,7 +407,7 @@ exports.compileFilter = function(filterString,options) {
 		this.filterCache = Object.create(null);
 		this.filterCacheCount = 0;
 	}
-	this.filterCache[cacheKey] = fnMeasured;
+	this.filterCache[filterString] = fnMeasured;
 	this.filterCacheCount++;
 	return fnMeasured;
 };

core/modules/filters/changecount.js

@@ -1,21 +0,0 @@
-/*\
-title: $:/core/modules/filters/changecount.js
-type: application/javascript
-module-type: filteroperator
-
-Filter operator for retrieving the changecount for each title in the list.
-
-\*/
-
-"use strict";
-
-/*
-Export our filter function
-*/
-exports.changecount = function(source,operator,options) {
-	var results = [];
-	source(function(tiddler,title) {
-		results.push(options.wiki.getChangeCount(title) + "");
-	});
-	return results;
-};

core/modules/filters/colour-ops.js

@@ -1,140 +0,0 @@
-/*\
-title: $:/core/modules/filters/colour-ops.js
-type: application/javascript
-module-type: filteroperator
-
-Filter operators for colour operations
-
-\*/
-
-"use strict";
-
-var Color = require("$:/core/modules/utils/dom/color.js").Color,
-	colourSpacesList = Object.keys(Color.spaces),
-	hueAdjustersList = ["raw","increasing","decreasing","longer","shorter"];
-
-exports["colour-lighten"] = makeSerialColourOperator(function (colour, operator, options) {
-	return colour.lighten($tw.utils.parseNumber(operator.operand)).display().toString();
-});
-
-exports["colour-darken"] = makeSerialColourOperator(function (colour, operator, options) {
-	return colour.darken($tw.utils.parseNumber(operator.operand)).display().toString();
-});
-
-exports["colour-get-oklch"] = makeSerialColourOperator(function (colour, operator, options) {
-	var prop = ((operator.suffixes || [])[0] || ["l"])[0];
-	if(["l","c","h"].indexOf(prop) !== -1) {
-		colour = colour.oklch[prop];
-	}
-	return colour.toString();
-});
-
-exports["colour-set-oklch"] = makeSerialColourOperator(function (colour, operator, options) {
-	var prop = ((operator.suffixes || [])[0] || ["l"])[0];
-	if(["l","c","h"].indexOf(prop) !== -1) {
-		colour.oklch[prop] = $tw.utils.parseNumber(operator.operand);
-	}
-	return colour.display().toString();
-});
-
-exports["colour-set-alpha"] = makeSerialColourOperator(function (colour, operator, options) {
-	colour.alpha = $tw.utils.parseNumber(operator.operand);
-	return colour.display().toString();
-});
-
-exports["colour-contrast"] = makeParallelColourOperator(function (colours, operator, options) {
-	var colourContrasts = [];
-	$tw.utils.each(colours,function(colour,index) {
-		if(!colour) {
-			colour = $tw.utils.parseCSSColorObject("white");
-			colours[index] = colour;
-		}
-		if(index > 0) {
-			colourContrasts.push(colour.contrast(colours[index - 1],"DeltaPhi").toString());
-		}
-	});
-	return colourContrasts;
-});
-
-exports["colour-best-contrast"] = makeParallelColourOperator(function (colours, operator, options, originalColours) {
-	var bestContrast = 0,
-		bestColour = null;
-	if(colours.length < 2) {
-		return [];
-	}
-	var targetColour = colours[colours.length - 1];
-	for(var t=0; t<colours.length; t++) {
-		var colour = colours[t];
-		if(colour) {
-			var contrast = colour.contrast(targetColour,"DeltaPhi");
-			if(contrast > bestContrast) {
-				bestContrast = contrast;
-				bestColour = originalColours[t];
-			}
-		}
-	}
-	if(bestColour) {
-		return [bestColour];
-	} else {
-		return [];
-	}
-});
-
-exports["colour-interpolate"] = function(source,operator,options) {
-	// Get the colour space suffix
-	var space = ((((operator.suffixes || [])[0] || ["srgb"])[0]) || "").toLowerCase();
-	if(colourSpacesList.indexOf(space) === -1) {
-		space = "lch";
-	}
-	// Get the hue adjuster suffix
-	var hueAdjuster = ((((operator.suffixes || [])[1] || ["shorter"])[0]) || "").toLowerCase();
-	if(hueAdjustersList.indexOf(hueAdjuster) === -1) {
-		hueAdjuster = "shorter";
-	}
-	// Get the colours
-	if(operator.operands.length < 2) {
-		return [];
-	}
-	var colourA = $tw.utils.parseCSSColorObject(operator.operands[0]),
-		colourB = $tw.utils.parseCSSColorObject(operator.operands[1]);
-	if(!colourA || !colourB) {
-		return [];
-	}
-	var rangefn = colourA.range(colourB,{space: space, hue: hueAdjuster});
-	// Cycle through the weights
-	var results = [];
-	source(function(tiddler,title) {
-		var index = $tw.utils.parseNumber(title);
-		var colour = rangefn(index);
-		results.push(colour.display().toString());
-	});
-	return results;
-};
-
-function makeSerialColourOperator(fn) {
-	return function (source, operator, options) {
-		var results = [];
-		source(function (tiddler, title) {
-			var c = $tw.utils.parseCSSColorObject(title);
-			if (c) {
-				c = fn(c, operator, options);
-				results.push(c);
-			} else {
-				results.push("");
-			}
-		});
-		return results;
-	};
-}
-
-function makeParallelColourOperator(fn) {
-	return function (source, operator, options) {
-		var originalColours = [],
-			colours = [];
-		source(function (tiddler, title) {
-			originalColours.push(title);
-			colours.push($tw.utils.parseCSSColorObject(title));
-		});
-		return fn(colours, operator, options, originalColours);
-	};
-}

core/modules/filters/filter.js

@@ -13,9 +13,7 @@ Filter operator returning those input titles that pass a subfilter
 Export our filter function
 */
 exports.filter = function(source,operator,options) {
-	var suffixes = operator.suffixes || [],
-		defaultFilterRunPrefix = (suffixes[0] || [options.defaultFilterRunPrefix] || [])[0] || "or",
-		filterFn = options.wiki.compileFilter(operator.operand,{defaultFilterRunPrefix}),
+	var filterFn = options.wiki.compileFilter(operator.operand),
 		results = [],
 		target = operator.prefix !== "!";
 	source(function(tiddler,title) {

core/modules/filters/subfilter.js

@@ -13,9 +13,7 @@ Filter operator returning its operand evaluated as a filter
 Export our filter function
 */
 exports.subfilter = function(source,operator,options) {
-	var suffixes = operator.suffixes || [],
-		defaultFilterRunPrefix = (suffixes[0] || [options.defaultFilterRunPrefix] || [])[0] || "or";
-	var list = options.wiki.filterTiddlers(operator.operand,options.widget,source,{defaultFilterRunPrefix});
+	var list = options.wiki.filterTiddlers(operator.operand,options.widget,source);
 	if(operator.prefix === "!") {
 		var results = [];
 		source(function(tiddler,title) {

core/modules/macros/contrastcolour.js

@@ -26,26 +26,25 @@ exports.params = [
 Run the macro
 */
 exports.run = function(target,fallbackTarget,colourA,colourB) {
-	var rgbTarget = $tw.utils.parseCSSColorObject(target) || $tw.utils.parseCSSColorObject(fallbackTarget);
+	var rgbTarget = $tw.utils.parseCSSColor(target) || $tw.utils.parseCSSColor(fallbackTarget);
 	if(!rgbTarget) {
 		return colourA;
 	}
-	var rgbColourA = $tw.utils.parseCSSColorObject(colourA),
-		rgbColourB = $tw.utils.parseCSSColorObject(colourB);
+	var rgbColourA = $tw.utils.parseCSSColor(colourA),
+		rgbColourB = $tw.utils.parseCSSColor(colourB);
 	if(rgbColourA && !rgbColourB) {
-		return colourA;
+		return rgbColourA;
 	}
 	if(rgbColourB && !rgbColourA) {
-		return colourB;
+		return rgbColourB;
 	}
 	if(!rgbColourA && !rgbColourB) {
 		// If neither colour is readable, return a crude inverse of the target
-		rgbTarget.srgb.r = 1 - rgbTarget.srgb.r;
-		rgbTarget.srgb.g = 1 - rgbTarget.srgb.g;
-		rgbTarget.srgb.b = 1 - rgbTarget.srgb.b;
-		return rgbTarget.display();
+		return [255 - rgbTarget[0],255 - rgbTarget[1],255 - rgbTarget[2],rgbTarget[3]];
 	}
-	var aContrast = rgbColourA.contrast(rgbTarget,"DeltaPhi"),
-		bContrast = rgbColourB.contrast(rgbTarget,"DeltaPhi");
-	return aContrast > bContrast ? colourA : colourB;
+	// Colour brightness formula derived from http://www.w3.org/WAI/ER/WD-AERT/#color-contrast
+	var brightnessTarget = rgbTarget[0] * 0.299 + rgbTarget[1] * 0.587 + rgbTarget[2] * 0.114,
+		brightnessA = rgbColourA[0] * 0.299 + rgbColourA[1] * 0.587 + rgbColourA[2] * 0.114,
+		brightnessB = rgbColourB[0] * 0.299 + rgbColourB[1] * 0.587 + rgbColourB[2] * 0.114;
+	return Math.abs(brightnessTarget - brightnessA) > Math.abs(brightnessTarget - brightnessB) ? colourA : colourB;
 };

core/modules/parsers/parseutils.js

@@ -107,13 +107,14 @@ exports.parseStringLiteral = function(source,pos) {
 		type: "string",
 		start: pos
 	};
-	var reString = /(?:"""([\s\S]*?)"""|"([^"]*)")|(?:'([^']*)')/g;
+	var reString = /(?:"""([\s\S]*?)"""|"([^"]*)")|(?:'([^']*)')|\[\[((?:[^\]]|\](?!\]))*)\]\]/g;
 	reString.lastIndex = pos;
 	var match = reString.exec(source);
 	if(match && match.index === pos) {
 		node.value = match[1] !== undefined ? match[1] :(
-			match[2] !== undefined ? match[2] : match[3]
-					);
+			match[2] !== undefined ? match[2] : (
+				match[3] !== undefined ? match[3] : match[4]
+			));
 		node.end = pos + match[0].length;
 		return node;
 	} else {
@@ -173,7 +174,7 @@ exports.parseMacroParameter = function(source,pos) {
 		start: pos
 	};
 	// Define our regexp
-	const reMacroParameter = /(?:([A-Za-z0-9\-_]+)\s*:)?(?:\s*(?:"""([\s\S]*?)"""|"([^"]*)"|'([^']*)'|\[\[([^\]]*)\]\]|((?:(?:>(?!>))|[^\s>"'])+)))/y;
+	const reMacroParameter = /(?:([A-Za-z0-9\-_]+)\s*:)?(?:\s*(?:"""([\s\S]*?)"""|"([^"]*)"|'([^']*)'|\[\[((?:[^\]]|\](?!\]))*)\]\]|((?:(?:>(?!>))|[^\s>"'])+)))/y;
 	// Skip whitespace
 	pos = $tw.utils.skipWhiteSpace(source,pos);
 	// Look for the parameter
@@ -206,28 +207,152 @@ exports.parseMacroParameter = function(source,pos) {
 Look for a macro invocation. Returns null if not found, or {type: "transclude", attributes:, start:, end:}
 */
 exports.parseMacroInvocationAsTransclusion = function(source,pos) {
-	var node = $tw.utils.parseMacroInvocation(source,pos);
-	if(node) {
-		var positionalName = 0,
-			transclusion = {
-				type: "transclude",
-				start: node.start,
-				end: node.end
-			};
-		$tw.utils.addAttributeToParseTreeNode(transclusion,"$variable",node.name);
-		$tw.utils.each(node.params,function(param) {
-			var name = param.name;
-			if(name) {
-				if(name.charAt(0) === "$") {
-					name = "$" + name;
-				}
-				$tw.utils.addAttributeToParseTreeNode(transclusion,{name: name,type: "string", value: param.value, start: param.start, end: param.end});
-			} else {
-				$tw.utils.addAttributeToParseTreeNode(transclusion,{name: (positionalName++) + "",type: "string", value: param.value, start: param.start, end: param.end});
-			}
-		});
-		return transclusion;
+	var node = {
+		type: "transclude",
+		start: pos,
+		attributes: {},
+		orderedAttributes: []
+	};
+	// Define our regexps
+	var reVarName = /([^\s>"'=:]+)/g;
+	// Skip whitespace
+	pos = $tw.utils.skipWhiteSpace(source,pos);
+	// Look for a double opening angle bracket
+	var token = $tw.utils.parseTokenString(source,pos,"<<");
+	if(!token) {
+		return null;
 	}
+	pos = token.end;
+	// Get the variable name for the macro
+	token = $tw.utils.parseTokenRegExp(source,pos,reVarName);
+	if(!token) {
+		return null;
+	}
+	$tw.utils.addAttributeToParseTreeNode(node,"$variable",token.match[1]);
+	pos = token.end;
+	// Check that the tag is terminated by a space or >>
+	if(!$tw.utils.parseWhiteSpace(source,pos) && !(source.charAt(pos) === ">" && source.charAt(pos + 1) === ">") ) {
+		return null;
+	}
+	// Process attributes
+	pos = $tw.utils.parseMacroParametersAsAttributes(node,source,pos);
+	// Skip whitespace
+	pos = $tw.utils.skipWhiteSpace(source,pos);
+	// Look for a double closing angle bracket
+	token = $tw.utils.parseTokenString(source,pos,">>");
+	if(!token) {
+		return null;
+	}
+	node.end = token.end;
+	return node;
+};
+
+/*
+Parse macro parameters as attributes. Returns the position after the last attribute
+*/
+exports.parseMacroParametersAsAttributes = function(node,source,pos) {
+	var position = 0,
+		attribute = $tw.utils.parseMacroParameterAsAttribute(source,pos);
+	while(attribute) {
+		if(!attribute.name) {
+			attribute.name = (position++) + "";
+			attribute.isPositional = true;
+		}
+		node.orderedAttributes.push(attribute);
+		node.attributes[attribute.name] = attribute;
+		pos = attribute.end;
+		// Get the next attribute
+		attribute = $tw.utils.parseMacroParameterAsAttribute(source,pos);
+	}
+	node.end = pos;
+	return pos;
+};
+
+/*
+Parse a macro parameter as an attribute. Returns null if not found, otherwise returns {name:, type: "filtered|string|indirect|macro", value|filter|textReference:, start:, end:,}, with the name being optional
+*/
+exports.parseMacroParameterAsAttribute = function(source,pos) {
+	var node = {
+		start: pos
+	};
+	// Define our regexps
+	var reAttributeName = /([^\/\s>"'`=:]+)/g,
+		reUnquotedAttribute = /((?:(?:>(?!>))|[^\s>"'])+)/g,
+		reFilteredValue = /\{\{\{([\S\s]+?)\}\}\}/g,
+		reIndirectValue = /\{\{([^\}]+)\}\}/g,
+		reSubstitutedValue = /(?:```([\s\S]*?)```|`([^`]|[\S\s]*?)`)/g;
+	// Skip whitespace
+	pos = $tw.utils.skipWhiteSpace(source,pos);
+	// Get the attribute name and the separator token
+	var nameToken = $tw.utils.parseTokenRegExp(source,pos,reAttributeName),
+		namePos = nameToken && $tw.utils.skipWhiteSpace(source,nameToken.end),
+		separatorToken = nameToken && $tw.utils.parseTokenRegExp(source,namePos,/=|:/g),
+		isNewStyleSeparator = false; // If there is no separator then we don't allow new style values
+	// If we have a name and a separator then we have a named attribute
+	if(nameToken && separatorToken) {
+		node.name = nameToken.match[1];
+		// key value separator is `=` or `:`
+		node.assignmentOperator = separatorToken.match[0];
+		pos = separatorToken.end;
+		isNewStyleSeparator = (node.assignmentOperator === "=");
+	}
+	// Skip whitespace
+	pos = $tw.utils.skipWhiteSpace(source,pos);
+	// Look for a string literal
+	var stringLiteral = $tw.utils.parseStringLiteral(source,pos);
+	if(stringLiteral) {
+		pos = stringLiteral.end;
+		node.type = "string";
+		node.value = stringLiteral.value;
+		// Mark the value as having been quoted in the source
+		node.quoted = true;
+	} else {
+		// Look for a filtered value
+		var filteredValue = $tw.utils.parseTokenRegExp(source,pos,reFilteredValue);
+		if(filteredValue && isNewStyleSeparator) {
+			pos = filteredValue.end;
+			node.type = "filtered";
+			node.filter = filteredValue.match[1];
+		} else {
+			// Look for an indirect value
+			var indirectValue = $tw.utils.parseTokenRegExp(source,pos,reIndirectValue);
+			if(indirectValue && isNewStyleSeparator) {
+				pos = indirectValue.end;
+				node.type = "indirect";
+				node.textReference = indirectValue.match[1];
+			} else {
+				// Look for a unquoted value
+				var unquotedValue = $tw.utils.parseTokenRegExp(source,pos,reUnquotedAttribute);
+				if(unquotedValue) {
+					pos = unquotedValue.end;
+					node.type = "string";
+					node.value = unquotedValue.match[1];
+				} else {
+					// Look for a macro invocation value
+					var macroInvocation = $tw.utils.parseMacroInvocationAsTransclusion(source,pos);
+					if(macroInvocation && isNewStyleSeparator) {
+						pos = macroInvocation.end;
+						node.type = "macro";
+						node.value = macroInvocation;
+					} else {
+						var substitutedValue = $tw.utils.parseTokenRegExp(source,pos,reSubstitutedValue);
+						if(substitutedValue && isNewStyleSeparator) {
+							pos = substitutedValue.end;
+							node.type = "substituted";
+							node.rawValue = substitutedValue.match[1] || substitutedValue.match[2];
+						} else {
+						}
+					}
+				}
+			}
+		}
+	}
+	// Bail if we don't have a value
+	if(!node.type) {
+		return null;
+	}
+	// Update the end position
+	node.end = pos;
 	return node;
 };
 
@@ -296,7 +421,7 @@ exports.parseFilterVariable = function(source) {
 };
 
 /*
-Look for an HTML attribute definition. Returns null if not found, otherwise returns {type: "attribute", name:, type: "filtered|string|indirect|macro", value|filter|textReference:, start:, end:,}
+Look for an HTML attribute definition. Returns null if not found, otherwise returns {name:, type: "filtered|string|indirect|macro", value|filter|textReference:, start:, end:,}
 */
 exports.parseAttribute = function(source,pos) {
 	var node = {
@@ -354,7 +479,7 @@ exports.parseAttribute = function(source,pos) {
 						node.value = unquotedValue.match[1];
 					} else {
 						// Look for a macro invocation value
-						var macroInvocation = $tw.utils.parseMacroInvocation(source,pos);
+						var macroInvocation = $tw.utils.parseMacroInvocationAsTransclusion(source,pos);
 						if(macroInvocation) {
 							pos = macroInvocation.end;
 							node.type = "macro";
@@ -375,6 +500,7 @@ exports.parseAttribute = function(source,pos) {
 			}
 		}
 	} else {
+		// If there is no equals sign or colon, then this is an attribute with no value, defaulting to "true"
 		node.type = "string";
 		node.value = "true";
 	}

core/modules/parsers/wikiparser/rules/macrodef.js

@@ -37,7 +37,7 @@ exports.parse = function() {
 	var paramString = this.match[2],
 		params = [];
 	if(paramString !== "") {
-		var reParam = /\s*([A-Za-z0-9\-_]+)(?:\s*:\s*(?:"""([\s\S]*?)"""|"([^"]*)"|'([^']*)'|\[\[([^\]]*)\]\]|([^"'\s]+)))?/mg,
+		var reParam = /\s*([A-Za-z0-9\-_]+)(?:\s*:\s*(?:"""([\s\S]*?)"""|"([^"]*)"|'([^']*)'|\[\[((?:[^\]]|\](?!\]))*)\]\]|([^"'\s]+)))?/mg,
 			paramMatch = reParam.exec(paramString);
 		while(paramMatch) {
 			// Save the parameter details

core/modules/parsers/wikiparser/rules/transcludeblock.js

@@ -23,27 +23,6 @@ exports.init = function(parser) {
 	this.matchRegExp = /\{\{([^\{\}\|]*)(?:\|\|([^\|\{\}]+))?(?:\|([^\{\}]+))?\}\}(?:\r?\n|$)/mg;
 };
 
-/*
-Reject the match if we don't have a template or text reference
-*/
-exports.findNextMatch = function(startPos) {
-	this.matchRegExp.lastIndex = startPos;
-	this.match = this.matchRegExp.exec(this.parser.source);
-	if(this.match) {
-		var template = $tw.utils.trim(this.match[2]),
-			textRef = $tw.utils.trim(this.match[1]);
-		// Bail if we don't have a template or text reference
-		if(!template && !textRef) {
-			return undefined;
-		} else {
-			return this.match.index;
-		}
-	} else {
-		return undefined;
-	}
-	return this.match ? this.match.index : undefined;
-};
-
 exports.parse = function() {
 	// Move past the match
 	this.parser.pos = this.matchRegExp.lastIndex;

core/modules/parsers/wikiparser/rules/transcludeinline.js

@@ -23,27 +23,6 @@ exports.init = function(parser) {
 	this.matchRegExp = /\{\{([^\{\}\|]*)(?:\|\|([^\|\{\}]+))?(?:\|([^\{\}]+))?\}\}/mg;
 };
 
-/*
-Reject the match if we don't have a template or text reference
-*/
-exports.findNextMatch = function(startPos) {
-	this.matchRegExp.lastIndex = startPos;
-	this.match = this.matchRegExp.exec(this.parser.source);
-	if(this.match) {
-		var template = $tw.utils.trim(this.match[2]),
-			textRef = $tw.utils.trim(this.match[1]);
-		// Bail if we don't have a template or text reference
-		if(!template && !textRef) {
-			return undefined;
-		} else {
-			return this.match.index;
-		}
-	} else {
-		return undefined;
-	}
-	return this.match ? this.match.index : undefined;
-};
-
 exports.parse = function() {
 	// Move past the match
 	this.parser.pos = this.matchRegExp.lastIndex;

core/modules/savers/postmessage.js

@@ -6,10 +6,7 @@ module-type: saver
 Handles saving changes via window.postMessage() to the window.parent
 
 \*/
-(function(){
 
-/*jslint node: true, browser: true */
-/*global $tw: false */
 "use strict";
 
 /*
@@ -63,4 +60,3 @@ exports.create = function(wiki) {
 	return new PostMessageSaver(wiki);
 };
 
-})();

core/modules/utils/dom/color-utils.js

@@ -1,55 +0,0 @@
-/*\
-title: $:/core/modules/utils/color-utils.js
-type: application/javascript
-module-type: utils
-
-Color.js related utilities
-
-\*/
-
-"use strict";
-
-var Color = require("$:/core/modules/utils/dom/color.js").Color;
-
-/*
-For backwards compatibility
-*/
-exports.parseCSSColor = function(colourString) {
-	var c = exports.parseCSSColorObject(colourString);
-	if(c) {
-		var rgb = c.srgb;
-		return [rgb[0],rgb[1],rgb[2],c.alpha];
-	} else {
-		return null;
-	}
-};
-
-
-/*
-Preferred way to parse a Color.js colour
-*/
-exports.parseCSSColorObject = function(colourString) {
-	var c = null;
-	try {
-		c = new Color(colourString);
-	} catch(e) {
-		// Return null if there is an error
-	}
-	return c;
-};
-
-/*
-Convert a CSS colour to an RGB string suitable for use with the <input type="color"> element
-*/
-exports.convertCSSColorToRGBString = function(colourString) {
-	var c = exports.parseCSSColorObject(colourString);
-	if(c) {
-		var hex = c.toString({format: "hex"});
-		if(hex.length === 4) {
-			hex = "#" + hex[1] + hex[1] + hex[2] + hex[2] + hex[3] + hex[3];
-		}
-		return hex;
-	} else {
-		return null;
-	}
-};

core/modules/utils/dom/color.js/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2021 Lea Verou, Chris Lilley
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

core/modules/utils/dom/color.js/tiddlywiki.files

@@ -1,21 +0,0 @@
-{
-	"tiddlers": [
-		{
-			"file": "color.global.min.v0.6.1.js",
-			"fields": {
-				"type": "application/javascript",
-				"title": "$:/core/modules/utils/dom/color.js",
-				"module-type": "library"
-			},
-			"prefix": "",
-			"suffix": ";\nexports.Color = Color;"
-		},
-		{
-			"file": "LICENSE",
-			"fields": {
-				"type": "text/plain",
-				"title": "$:/core/modules/utils/dom/color.js/license"
-			}
-		}
-	]
-}

core/modules/utils/dom/csscolorparser.js

@@ -0,0 +1,200 @@
+// (c) Dean McNamee <dean@gmail.com>, 2012.
+//
+// https://github.com/deanm/css-color-parser-js
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to
+// deal in the Software without restriction, including without limitation the
+// rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+// sell copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+// FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+// IN THE SOFTWARE.
+
+// http://www.w3.org/TR/css3-color/
+var kCSSColorTable = {
+  "transparent": [0,0,0,0], "aliceblue": [240,248,255,1],
+  "antiquewhite": [250,235,215,1], "aqua": [0,255,255,1],
+  "aquamarine": [127,255,212,1], "azure": [240,255,255,1],
+  "beige": [245,245,220,1], "bisque": [255,228,196,1],
+  "black": [0,0,0,1], "blanchedalmond": [255,235,205,1],
+  "blue": [0,0,255,1], "blueviolet": [138,43,226,1],
+  "brown": [165,42,42,1], "burlywood": [222,184,135,1],
+  "cadetblue": [95,158,160,1], "chartreuse": [127,255,0,1],
+  "chocolate": [210,105,30,1], "coral": [255,127,80,1],
+  "cornflowerblue": [100,149,237,1], "cornsilk": [255,248,220,1],
+  "crimson": [220,20,60,1], "cyan": [0,255,255,1],
+  "darkblue": [0,0,139,1], "darkcyan": [0,139,139,1],
+  "darkgoldenrod": [184,134,11,1], "darkgray": [169,169,169,1],
+  "darkgreen": [0,100,0,1], "darkgrey": [169,169,169,1],
+  "darkkhaki": [189,183,107,1], "darkmagenta": [139,0,139,1],
+  "darkolivegreen": [85,107,47,1], "darkorange": [255,140,0,1],
+  "darkorchid": [153,50,204,1], "darkred": [139,0,0,1],
+  "darksalmon": [233,150,122,1], "darkseagreen": [143,188,143,1],
+  "darkslateblue": [72,61,139,1], "darkslategray": [47,79,79,1],
+  "darkslategrey": [47,79,79,1], "darkturquoise": [0,206,209,1],
+  "darkviolet": [148,0,211,1], "deeppink": [255,20,147,1],
+  "deepskyblue": [0,191,255,1], "dimgray": [105,105,105,1],
+  "dimgrey": [105,105,105,1], "dodgerblue": [30,144,255,1],
+  "firebrick": [178,34,34,1], "floralwhite": [255,250,240,1],
+  "forestgreen": [34,139,34,1], "fuchsia": [255,0,255,1],
+  "gainsboro": [220,220,220,1], "ghostwhite": [248,248,255,1],
+  "gold": [255,215,0,1], "goldenrod": [218,165,32,1],
+  "gray": [128,128,128,1], "green": [0,128,0,1],
+  "greenyellow": [173,255,47,1], "grey": [128,128,128,1],
+  "honeydew": [240,255,240,1], "hotpink": [255,105,180,1],
+  "indianred": [205,92,92,1], "indigo": [75,0,130,1],
+  "ivory": [255,255,240,1], "khaki": [240,230,140,1],
+  "lavender": [230,230,250,1], "lavenderblush": [255,240,245,1],
+  "lawngreen": [124,252,0,1], "lemonchiffon": [255,250,205,1],
+  "lightblue": [173,216,230,1], "lightcoral": [240,128,128,1],
+  "lightcyan": [224,255,255,1], "lightgoldenrodyellow": [250,250,210,1],
+  "lightgray": [211,211,211,1], "lightgreen": [144,238,144,1],
+  "lightgrey": [211,211,211,1], "lightpink": [255,182,193,1],
+  "lightsalmon": [255,160,122,1], "lightseagreen": [32,178,170,1],
+  "lightskyblue": [135,206,250,1], "lightslategray": [119,136,153,1],
+  "lightslategrey": [119,136,153,1], "lightsteelblue": [176,196,222,1],
+  "lightyellow": [255,255,224,1], "lime": [0,255,0,1],
+  "limegreen": [50,205,50,1], "linen": [250,240,230,1],
+  "magenta": [255,0,255,1], "maroon": [128,0,0,1],
+  "mediumaquamarine": [102,205,170,1], "mediumblue": [0,0,205,1],
+  "mediumorchid": [186,85,211,1], "mediumpurple": [147,112,219,1],
+  "mediumseagreen": [60,179,113,1], "mediumslateblue": [123,104,238,1],
+  "mediumspringgreen": [0,250,154,1], "mediumturquoise": [72,209,204,1],
+  "mediumvioletred": [199,21,133,1], "midnightblue": [25,25,112,1],
+  "mintcream": [245,255,250,1], "mistyrose": [255,228,225,1],
+  "moccasin": [255,228,181,1], "navajowhite": [255,222,173,1],
+  "navy": [0,0,128,1], "oldlace": [253,245,230,1],
+  "olive": [128,128,0,1], "olivedrab": [107,142,35,1],
+  "orange": [255,165,0,1], "orangered": [255,69,0,1],
+  "orchid": [218,112,214,1], "palegoldenrod": [238,232,170,1],
+  "palegreen": [152,251,152,1], "paleturquoise": [175,238,238,1],
+  "palevioletred": [219,112,147,1], "papayawhip": [255,239,213,1],
+  "peachpuff": [255,218,185,1], "peru": [205,133,63,1],
+  "pink": [255,192,203,1], "plum": [221,160,221,1],
+  "powderblue": [176,224,230,1], "purple": [128,0,128,1],
+  "red": [255,0,0,1], "rosybrown": [188,143,143,1],
+  "royalblue": [65,105,225,1], "saddlebrown": [139,69,19,1],
+  "salmon": [250,128,114,1], "sandybrown": [244,164,96,1],
+  "seagreen": [46,139,87,1], "seashell": [255,245,238,1],
+  "sienna": [160,82,45,1], "silver": [192,192,192,1],
+  "skyblue": [135,206,235,1], "slateblue": [106,90,205,1],
+  "slategray": [112,128,144,1], "slategrey": [112,128,144,1],
+  "snow": [255,250,250,1], "springgreen": [0,255,127,1],
+  "steelblue": [70,130,180,1], "tan": [210,180,140,1],
+  "teal": [0,128,128,1], "thistle": [216,191,216,1],
+  "tomato": [255,99,71,1], "turquoise": [64,224,208,1],
+  "violet": [238,130,238,1], "wheat": [245,222,179,1],
+  "white": [255,255,255,1], "whitesmoke": [245,245,245,1],
+  "yellow": [255,255,0,1], "yellowgreen": [154,205,50,1]}
+
+function clamp_css_byte(i) {  // Clamp to integer 0 .. 255.
+  i = Math.round(i);  // Seems to be what Chrome does (vs truncation).
+  return i < 0 ? 0 : i > 255 ? 255 : i;
+}
+
+function clamp_css_float(f) {  // Clamp to float 0.0 .. 1.0.
+  return f < 0 ? 0 : f > 1 ? 1 : f;
+}
+
+function parse_css_int(str) {  // int or percentage.
+  if (str[str.length - 1] === '%')
+    return clamp_css_byte(parseFloat(str) / 100 * 255);
+  return clamp_css_byte(parseInt(str));
+}
+
+function parse_css_float(str) {  // float or percentage.
+  if (str[str.length - 1] === '%')
+    return clamp_css_float(parseFloat(str) / 100);
+  return clamp_css_float(parseFloat(str));
+}
+
+function css_hue_to_rgb(m1, m2, h) {
+  if (h < 0) h += 1;
+  else if (h > 1) h -= 1;
+
+  if (h * 6 < 1) return m1 + (m2 - m1) * h * 6;
+  if (h * 2 < 1) return m2;
+  if (h * 3 < 2) return m1 + (m2 - m1) * (2/3 - h) * 6;
+  return m1;
+}
+
+function parseCSSColor(css_str) {
+  // Remove all whitespace, not compliant, but should just be more accepting.
+  var str = css_str.replace(/ /g, '').toLowerCase();
+
+  // Color keywords (and transparent) lookup.
+  if (str in kCSSColorTable) return kCSSColorTable[str].slice();  // dup.
+
+  // #abc and #abc123 syntax.
+  if (str[0] === '#') {
+    if (str.length === 4) {
+      var iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
+      if (!(iv >= 0 && iv <= 0xfff)) return null;  // Covers NaN.
+      return [((iv & 0xf00) >> 4) | ((iv & 0xf00) >> 8),
+              (iv & 0xf0) | ((iv & 0xf0) >> 4),
+              (iv & 0xf) | ((iv & 0xf) << 4),
+              1];
+    } else if (str.length === 7) {
+      var iv = parseInt(str.substr(1), 16);  // TODO(deanm): Stricter parsing.
+      if (!(iv >= 0 && iv <= 0xffffff)) return null;  // Covers NaN.
+      return [(iv & 0xff0000) >> 16,
+              (iv & 0xff00) >> 8,
+              iv & 0xff,
+              1];
+    }
+
+    return null;
+  }
+
+  var op = str.indexOf('('), ep = str.indexOf(')');
+  if (op !== -1 && ep + 1 === str.length) {
+    var fname = str.substr(0, op);
+    var params = str.substr(op+1, ep-(op+1)).split(',');
+    var alpha = 1;  // To allow case fallthrough.
+    switch (fname) {
+      case 'rgba':
+        if (params.length !== 4) return null;
+        alpha = parse_css_float(params.pop());
+        // Fall through.
+      case 'rgb':
+        if (params.length !== 3) return null;
+        return [parse_css_int(params[0]),
+                parse_css_int(params[1]),
+                parse_css_int(params[2]),
+                alpha];
+      case 'hsla':
+        if (params.length !== 4) return null;
+        alpha = parse_css_float(params.pop());
+        // Fall through.
+      case 'hsl':
+        if (params.length !== 3) return null;
+        var h = (((parseFloat(params[0]) % 360) + 360) % 360) / 360;  // 0 .. 1
+        // NOTE(deanm): According to the CSS spec s/l should only be
+        // percentages, but we don't bother and let float or percentage.
+        var s = parse_css_float(params[1]);
+        var l = parse_css_float(params[2]);
+        var m2 = l <= 0.5 ? l * (s + 1) : l + s - l * s;
+        var m1 = l * 2 - m2;
+        return [clamp_css_byte(css_hue_to_rgb(m1, m2, h+1/3) * 255),
+                clamp_css_byte(css_hue_to_rgb(m1, m2, h) * 255),
+                clamp_css_byte(css_hue_to_rgb(m1, m2, h-1/3) * 255),
+                alpha];
+      default:
+        return null;
+    }
+  }
+
+  return null;
+}
+
+try { exports.parseCSSColor = parseCSSColor } catch(e) { }

core/modules/utils/dom/csscolorparser.js.meta

@@ -0,0 +1,3 @@
+title: $:/core/modules/utils/dom/csscolorparser.js
+type: application/javascript
+module-type: utils

core/modules/utils/errors.js

@@ -6,6 +6,7 @@ module-type: utils
 Custom errors for TiddlyWiki.
 
 \*/
+
 function TranscludeRecursionError() {
 	Error.apply(this,arguments);
 	this.signatures = Object.create(null);

core/modules/utils/fakedom.js

@@ -37,6 +37,7 @@ Object.defineProperty(TW_Node.prototype, 'TEXT_NODE', {
 var TW_TextNode = function(text) {
 	bumpSequenceNumber(this);
 	this.textContent = text + "";
+	this.children = [];
 };
 
 Object.setPrototypeOf(TW_TextNode.prototype,TW_Node.prototype);

core/modules/utils/messaging.js

@@ -8,10 +8,7 @@ Messaging utilities for use with window.postMessage() etc.
 This module intentionally has no dependencies so that it can be included in non-TiddlyWiki projects
 
 \*/
-(function(){
 
-/*jslint node: true, browser: true */
-/*global $tw: false */
 "use strict";
 
 var RESPONSE_TIMEOUT = 2 * 1000;
@@ -122,5 +119,3 @@ BrowserMessagingPublisher.prototype.close = function() {
 };
 
 exports.BrowserMessagingPublisher = BrowserMessagingPublisher;
-
-})();

core/modules/utils/utils.js

@@ -242,6 +242,53 @@ exports.slowInSlowOut = function(t) {
 	return (1 - ((Math.cos(t * Math.PI) + 1) / 2));
 };
 
+exports.copyObjectPropertiesSafe = function(object) {
+	const seen = new Set(),
+		isDOMElement = value => value instanceof Node || value instanceof Window;
+
+	function safeCopy(obj) {
+		// skip circular references
+		if(seen.has(obj)) {
+			return undefined;
+		}
+		// primitives and null are safe
+		if(typeof obj !== "object" || obj === null) {
+			return obj;
+		}
+		// skip DOM elements
+		if(isDOMElement(obj)) {
+			return undefined;
+		}
+		// copy arrays, preserving positions
+		if(Array.isArray(obj)) {
+			return obj.map(item => {
+				const value = safeCopy(item);
+				return value === undefined ? null : value;
+			});
+		}
+
+		seen.add(obj);
+		const copy = {};
+		let key,
+			value;
+		for(key in obj) {
+			try {
+				value = safeCopy(obj[key]);
+				if(value !== undefined) {
+					copy[key] = value;
+				}
+			} catch(e) {
+				// silently skip unserializable properties
+			}
+		}
+		return copy;
+	}
+
+	const result = safeCopy(object);
+	seen.clear();
+	return result;
+};
+
 exports.formatTitleString = function(template,options) {
 	var base = options.base || "",
 		separator = options.separator || "",

core/modules/widgets/action-sendmessage.js

@@ -62,8 +62,8 @@ SendMessageWidget.prototype.invokeAction = function(triggeringWidget,event) {
 	var paramObject = Object.create(null);
 	// Add names/values pairs if present
 	if(this.actionNames && this.actionValues) {
-		var names = this.wiki.filterTiddlers(this.actionNames,this,{defaultFilterRunPrefix: "all"}),
-			values = this.wiki.filterTiddlers(this.actionValues,this,{defaultFilterRunPrefix: "all"});
+		var names = this.wiki.filterTiddlers(this.actionNames,this),
+			values = this.wiki.filterTiddlers(this.actionValues,this);
 		$tw.utils.each(names,function(name,index) {
 			paramObject[name] = values[index] || "";
 		});

core/modules/widgets/action-setmultiplefields.js

@@ -56,10 +56,10 @@ Invoke the action associated with this widget
 */
 SetMultipleFieldsWidget.prototype.invokeAction = function(triggeringWidget,event) {
 	var tiddler = this.wiki.getTiddler(this.actionTiddler),
-		names, values = this.wiki.filterTiddlers(this.actionValues,this,{defaultFilterRunPrefix: "all"});
+		names, values = this.wiki.filterTiddlers(this.actionValues,this);
 	if(this.actionFields) {
 		var additions = {};
-		names = this.wiki.filterTiddlers(this.actionFields,this,{defaultFilterRunPrefix: "all"});
+		names = this.wiki.filterTiddlers(this.actionFields,this);
 		$tw.utils.each(names,function(fieldname,index) {
 			additions[fieldname] = values[index] || "";
 		});
@@ -68,7 +68,7 @@ SetMultipleFieldsWidget.prototype.invokeAction = function(triggeringWidget,event
 		this.wiki.addTiddler(new $tw.Tiddler(creationFields,tiddler,{title: this.actionTiddler},modificationFields,additions));
 	} else if(this.actionIndexes) {
 		var data = this.wiki.getTiddlerData(this.actionTiddler,Object.create(null));
-		names = this.wiki.filterTiddlers(this.actionIndexes,this,{defaultFilterRunPrefix: "all"});
+		names = this.wiki.filterTiddlers(this.actionIndexes,this);
 		$tw.utils.each(names,function(name,index) {
 			data[name] = values[index] || "";
 		});

core/modules/widgets/browse.js

@@ -80,8 +80,8 @@ BrowseWidget.prototype.render = function(parent,nextSibling) {
 	});
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 /*

core/modules/widgets/button.js

@@ -135,8 +135,8 @@ ButtonWidget.prototype.render = function(parent,nextSibling) {
 	}
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 /*

core/modules/widgets/checkbox.js

@@ -64,8 +64,8 @@ CheckboxWidget.prototype.render = function(parent,nextSibling) {
 	]);
 	// Insert the label into the DOM and render any children
 	parent.insertBefore(this.labelDomNode,nextSibling);
-	this.renderChildren(this.spanDomNode,null);
 	this.domNodes.push(this.labelDomNode);
+	this.renderChildren(this.spanDomNode,null);
 };
 
 CheckboxWidget.prototype.getValue = function() {

core/modules/widgets/diff-text.js

@@ -59,6 +59,8 @@ DiffTextWidget.prototype.render = function(parent,nextSibling) {
 	var domContainer = this.document.createElement("div"), 
 		domDiff = this.createDiffDom(diffs);
 	parent.insertBefore(domContainer,nextSibling);
+	// Save our container
+	this.domNodes.push(domContainer);
 	// Set variables
 	this.setVariable("diff-count",diffs.reduce(function(acc,diff) {
 		if(diff[0] !== dmp.DIFF_EQUAL) {
@@ -70,8 +72,6 @@ DiffTextWidget.prototype.render = function(parent,nextSibling) {
 	this.renderChildren(domContainer,null);
 	// Render the diff
 	domContainer.appendChild(domDiff);
-	// Save our container
-	this.domNodes.push(domContainer);
 };
 
 /*

core/modules/widgets/draggable.js

@@ -56,6 +56,7 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
 	});
 	// Insert the node into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
+	this.domNodes.push(domNode);
 	this.renderChildren(domNode,null);
 	// Add event handlers
 	if(this.dragEnable) {
@@ -70,7 +71,6 @@ DraggableWidget.prototype.render = function(parent,nextSibling) {
 			selector: self.dragHandleSelector
 		});
 	}
-	this.domNodes.push(domNode);
 };
 
 /*

core/modules/widgets/droppable.js

@@ -57,8 +57,8 @@ DroppableWidget.prototype.render = function(parent,nextSibling) {
 	}
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 	// Stack of outstanding enter/leave events
 	this.currentlyEntered = [];
 };

core/modules/widgets/element.js

@@ -77,8 +77,8 @@ ElementWidget.prototype.render = function(parent,nextSibling) {
 	// Allow hooks to manipulate the DOM node. Eg: Add debug info
 	$tw.hooks.invokeHook("th-dom-rendering-element", domNode, this);
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 /*

core/modules/widgets/eventcatcher.js

@@ -39,75 +39,12 @@ EventWidget.prototype.render = function(parent,nextSibling) {
 	this.domNode = domNode;
 	// Assign classes
 	this.assignDomNodeClasses();
-	// Add our event handler
-	$tw.utils.each(this.types,function(type) {
-		domNode.addEventListener(type,function(event) {
-			var selector = self.getAttribute("selector"),
-				matchSelector = self.getAttribute("matchSelector"),
-				actions = self.getAttribute("$"+type),
-				stopPropagation = self.getAttribute("stopPropagation","onaction"),
-				selectedNode = event.target,
-				selectedNodeRect,
-				catcherNodeRect,
-				variables = {};
-			// Firefox can fire dragover and dragenter events on text nodes instead of their parents
-			if(selectedNode.nodeType === 3) {
-				selectedNode = selectedNode.parentNode;
-			}
-			// Check that the selected node matches any matchSelector
-			if(matchSelector && !$tw.utils.domMatchesSelector(selectedNode,matchSelector)) {
-				return false;
-			}
-			if(selector) {
-				// Search ancestors for a node that matches the selector
-				while(!$tw.utils.domMatchesSelector(selectedNode,selector) && selectedNode !== domNode) {
-					selectedNode = selectedNode.parentNode;
-				}
-				// Exit if we didn't find one
-				if(selectedNode === domNode) {
-					return false;
-				}
-				// Only set up variables if we have actions to invoke
-				if(actions) {
-					variables = $tw.utils.collectDOMVariables(selectedNode,self.domNode,event);
-				}
-			}
-			// Execute our actions with the variables
-			if(actions) {
-				// Add a variable for the modifier key
-				variables.modifier = $tw.keyboardManager.getEventModifierKeyDescriptor(event);
-				// Add a variable for the mouse button
-				if("button" in event) {
-					if(event.button === 0) {
-						variables["event-mousebutton"] = "left";
-					} else if(event.button === 1) {
-						variables["event-mousebutton"] = "middle";
-					} else if(event.button === 2) {
-						variables["event-mousebutton"] = "right";
-					}
-				}
-				variables["event-type"] = event.type.toString();
-				if(typeof event.detail === "object" && !!event.detail) {
-					$tw.utils.each(event.detail,function(detailValue,detail) {
-						variables["event-detail-" + detail] = detailValue.toString();
-					});
-				} else if(!!event.detail) {
-					variables["event-detail"] = event.detail.toString();
-				}
-				self.invokeActionString(actions,self,event,variables);
-			}
-			if((actions && stopPropagation === "onaction") || stopPropagation === "always") {
-				event.preventDefault();
-				event.stopPropagation();
-				return true;
-			}
-			return false;
-		},false);
-	});
+	// Add our event handlers
+	this.toggleListeners();
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 /*
@@ -122,11 +59,232 @@ EventWidget.prototype.execute = function() {
 			self.types.push(key.slice(1));
 		}
 	});
+	this.pointerCaptureMode = this.getAttribute("pointerCapture","no");
 	this.elementTag = this.getAttribute("tag");
 	// Make child widgets
 	this.makeChildWidgets();
 };
 
+/*
+Cache and pre-create all event listeners, called when first needed
+*/
+EventWidget.prototype.cacheEventListeners = function() {
+	if(this._eventListeners) {
+		return;
+	}
+	this._eventListeners = Object.create(null);
+	this._captureActiveListeners = Object.create(null);
+	this._dynamicOnlyEvents = ["pointerup","pointercancel","pointermove"];
+
+	const clearPointerCapture = event => {
+		if(Number.isInteger(this._capturePointerId)) {
+			this.stopPointerCapture(this._capturePointerId);
+		}
+	};
+
+	const attachDynamicOnlyListeners = () => {
+		this._dynamicOnlyEvents.forEach(dt => {
+			const listener = this._eventListeners[dt];
+			if(listener) {
+				this._captureActiveListeners[dt] = listener;
+				this.domNode.addEventListener(dt, listener, false);
+			}
+		});
+	};
+
+	// Dynamic pointer capture listeners
+	if(this.pointerCaptureMode === "dynamic") {
+		["pointerup","pointercancel"].forEach(type => {
+			this._eventListeners[type] = event => {
+				const selectedNode = this.checkEvent(event, type);
+				if(selectedNode) {
+					clearPointerCapture(event);
+				}
+				// Remove dynamic-only listeners
+				this.cleanupDynamicListeners();
+				return this.handleEvent(event, type, selectedNode);
+			};
+		});
+		if(!this.types.includes("pointerdown")) {
+			this.types.push("pointerdown");
+		}
+	}
+
+	// Create any listeners not already defined above
+	this.types.forEach(type => {
+		if(!this._eventListeners[type]) {
+			this._eventListeners[type] = event => {
+				const selectedNode = this.checkEvent(event, type);
+				if(!selectedNode) {
+					return false;
+				}
+				// Handle pointer capture for pointerdown
+				if(type === "pointerdown") {
+					if(this.pointerCaptureMode !== "no") {
+						this.startPointerCapture(event.pointerId, event.target);
+					}
+
+					if(this.pointerCaptureMode === "dynamic") {
+						attachDynamicOnlyListeners();
+					}
+				} else if(type === "pointerup" || type === "pointercancel") {
+					clearPointerCapture(event);
+				}
+				return this.handleEvent(event, type, selectedNode);
+			};
+		}
+	});
+};
+
+/*
+Check if an event qualifies and return the matching selected node
+*/
+EventWidget.prototype.checkEvent = function(event, type) {
+	const domNode = this.domNode;
+	let node = event.target;
+
+	// Use capture target if valid
+	if(this._captureTarget && event.pointerId !== undefined) {
+		if(document.contains(this._captureTarget)) {
+			node = this._captureTarget;
+		} else {
+			// Clear stale reference
+			this.stopPointerCapture(this._capturePointerId);
+			node = event.target;
+		}
+	}
+
+	if(node && node.nodeType === 3) {
+		node = node.parentNode;
+	}
+	if(!node || node.nodeType !== 1) {
+		return null;
+	}
+
+	const selector = this.getAttribute("selector"),
+		matchSelector = this.getAttribute("matchSelector");
+
+	if(matchSelector && !node.matches(matchSelector)) {
+		return null;
+	}
+	if(selector) {
+		const match = node.closest(selector);
+		if(!match || match === domNode || !domNode.contains(match)) {
+			return null;
+		}
+		return match;
+	}
+	return node;
+};
+
+/*
+Handle the event and execute actions
+*/
+EventWidget.prototype.handleEvent = function(event, type, selectedNode) {
+	if(!selectedNode) {
+		return false;
+	}
+	let actions = this.getAttribute("$"+type),
+		stopPropagation = this.getAttribute("stopPropagation","onaction");
+
+	if(actions) {
+		let variables = $tw.utils.extend(
+			{},
+			$tw.utils.collectDOMVariables(selectedNode, this.domNode, event),
+			{
+				"eventJSON": JSON.stringify($tw.utils.copyObjectPropertiesSafe(event)),
+				"modifier": $tw.keyboardManager.getEventModifierKeyDescriptor(event),
+				"event-type": event.type.toString()
+			}
+		);
+
+		if("button" in event) {
+			const mouseButtonMap = {0:"left",1:"middle",2:"right"};
+			variables["event-mousebutton"] = mouseButtonMap[event.button];
+		}
+		this.invokeActionString(actions, this, event, variables);
+	}
+
+	if((actions && stopPropagation === "onaction") || stopPropagation === "always") {
+		event.preventDefault();
+		event.stopPropagation();
+		return true;
+	}
+	return false;
+};
+
+EventWidget.prototype.startPointerCapture = function(pointerId, captureTarget) {
+	// Start capture only if none active; pointerId can be 0 
+	if(!Number.isInteger(this._capturePointerId) && this.domNode && this.domNode.setPointerCapture) {
+		this.domNode.setPointerCapture(pointerId);
+		this._capturePointerId = pointerId;
+		this._captureTarget = captureTarget;
+	}
+};
+
+EventWidget.prototype.stopPointerCapture = function(pointerId) {
+	if(this.domNode && this.domNode.hasPointerCapture && this.domNode.hasPointerCapture(pointerId)) {
+		this.domNode.releasePointerCapture(pointerId);
+	}
+	this._capturePointerId = undefined;
+	this._captureTarget = undefined;
+};
+
+/*
+Attach all relevant listeners
+*/
+EventWidget.prototype.attachListeners = function() {
+	this.cacheEventListeners();
+	const domNode = this.domNode;
+	Object.keys(this._eventListeners).forEach(type => {
+		if(this.pointerCaptureMode === "dynamic" && this._dynamicOnlyEvents.includes(type)) {
+			return; //skip dynamic-only events
+		}
+		domNode.addEventListener(type, this._eventListeners[type], false);
+	});
+};
+
+/*
+Remove dynamic active listeners
+*/
+EventWidget.prototype.cleanupDynamicListeners = function() {
+	const domNode = this.domNode;
+	Object.keys(this._captureActiveListeners || {}).forEach(type => {
+		domNode.removeEventListener(type, this._captureActiveListeners[type], false);
+	});
+	this._captureActiveListeners = Object.create(null);
+};
+
+/*
+Remove all listeners
+*/
+EventWidget.prototype.removeAllListeners = function() {
+	if(Number.isInteger(this._capturePointerId)) {
+		this.stopPointerCapture(this._capturePointerId);
+	}
+	const domNode = this.domNode;
+	Object.keys(this._eventListeners || {}).forEach(type => {
+		domNode.removeEventListener(type, this._eventListeners[type], false);
+	});
+	this.cleanupDynamicListeners();
+	this._captureTarget = null;
+};
+
+/*
+Enable or disable listeners
+*/
+EventWidget.prototype.toggleListeners = function() {
+	let disabled = this.getAttribute("disabled","no") === "yes";
+	if(disabled) {
+		this.removeAllListeners();
+	} else {
+		this.attachListeners();
+	}
+};
+
+/*
+Assign DOM node classes
+*/
 EventWidget.prototype.assignDomNodeClasses = function() {
 	var classes = this.getAttribute("class","").split(" ");
 	classes.push("tc-eventcatcher");
@@ -134,18 +292,23 @@ EventWidget.prototype.assignDomNodeClasses = function() {
 };
 
 /*
-Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
+Refresh widget
 */
 EventWidget.prototype.refresh = function(changedTiddlers) {
-	var changedAttributes = this.computeAttributes(),
-		changedAttributesCount = $tw.utils.count(changedAttributes);
-	if(changedAttributesCount === 1 && changedAttributes["class"]) {
-		this.assignDomNodeClasses();
-	} else if(changedAttributesCount > 0) {
-		this.refreshSelf();
-		return true;
+	const changedAttributes = this.computeAttributes(),
+		changedKeys = Object.keys(changedAttributes),
+		canUpdateAttributes = changedKeys.every(key => key === "class" || key === "disabled");
+	if(canUpdateAttributes) {
+		if(changedAttributes["class"]) {
+			this.assignDomNodeClasses();
+		}
+		if(changedAttributes["disabled"]) {
+			this.toggleListeners();
+		}
+		return this.refreshChildren(changedTiddlers);
 	}
-	return this.refreshChildren(changedTiddlers);
+	this.refreshSelf();
+	return true;
 };
 
 exports.eventcatcher = EventWidget;

core/modules/widgets/genesis.js

@@ -72,8 +72,8 @@ GenesisWidget.prototype.execute = function() {
 	this.attributeNames = [];
 	this.attributeValues = [];
 	if(this.genesisNames && this.genesisValues) {
-		this.attributeNames = this.wiki.filterTiddlers(self.genesisNames,this,{defaultFilterRunPrefix: "all"});
-		this.attributeValues = this.wiki.filterTiddlers(self.genesisValues,this,{defaultFilterRunPrefix: "all"});
+		this.attributeNames = this.wiki.filterTiddlers(self.genesisNames,this);
+		this.attributeValues = this.wiki.filterTiddlers(self.genesisValues,this);
 		$tw.utils.each(this.attributeNames,function(varname,index) {
 			$tw.utils.addAttributeToParseTreeNode(parseTreeNodes[0],varname,self.attributeValues[index] || "");
 		});
@@ -103,8 +103,8 @@ GenesisWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes(),
 		filterNames = this.getAttribute("$names",""),
 		filterValues = this.getAttribute("$values",""),
-		attributeNames = this.wiki.filterTiddlers(filterNames,this,{defaultFilterRunPrefix: "all"}),
-		attributeValues = this.wiki.filterTiddlers(filterValues,this,{defaultFilterRunPrefix: "all"});
+		attributeNames = this.wiki.filterTiddlers(filterNames,this),
+		attributeValues = this.wiki.filterTiddlers(filterValues,this);
 	if($tw.utils.count(changedAttributes) > 0 || !$tw.utils.isArrayEqual(this.attributeNames,attributeNames) || !$tw.utils.isArrayEqual(this.attributeValues,attributeValues)) {
 		this.refreshSelf();
 		return true;

core/modules/widgets/image.js

@@ -45,7 +45,7 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 	this.execute();
 	// Create element
 	// Determine what type of image it is
-	var tag = "img", src = "",
+	var tag = "img", src = "", self = this,
 		tiddler = this.wiki.getTiddler(this.imageSource);
 	if(!tiddler) {
 		// The source isn't the title of a tiddler, so we'll assume it's a URL
@@ -115,11 +115,21 @@ ImageWidget.prototype.render = function(parent,nextSibling) {
 	if(this.lazyLoading && tag === "img") {
 		domNode.setAttribute("loading",this.lazyLoading);
 	}
+	this.assignAttributes(domNode,{
+		sourcePrefix: "data-",
+		destPrefix: "data-"
+	});
 	// Add classes when the image loads or fails
 	$tw.utils.addClass(domNode,"tc-image-loading");
-	domNode.addEventListener("load",function() {
+	domNode.addEventListener("load",function(event) {
 		$tw.utils.removeClass(domNode,"tc-image-loading");
 		$tw.utils.addClass(domNode,"tc-image-loaded");
+		if(self.loadedActions) {
+			var variables = $tw.utils.collectDOMVariables(domNode,null,event);
+			variables["img-natural-width"] = domNode.naturalWidth.toString();
+			variables["img-natural-height"] = domNode.naturalHeight.toString();
+			self.invokeActionString(self.loadedActions,self,event,variables);		
+		}
 	},false);
 	domNode.addEventListener("error",function() {
 		$tw.utils.removeClass(domNode,"tc-image-loading");
@@ -143,17 +153,31 @@ ImageWidget.prototype.execute = function() {
 	this.imageTooltip = this.getAttribute("tooltip");
 	this.imageAlt = this.getAttribute("alt");
 	this.lazyLoading = this.getAttribute("loading");
+	this.loadedActions = this.getAttribute("loadActions");
 };
 
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */
 ImageWidget.prototype.refresh = function(changedTiddlers) {
-	var changedAttributes = this.computeAttributes();
-	if(changedAttributes.source || changedAttributes.width || changedAttributes.height || changedAttributes["class"] || changedAttributes.usemap || changedAttributes.tooltip || changedTiddlers[this.imageSource]) {
+	var changedAttributes = this.computeAttributes(),
+		hasChangedAttributes = $tw.utils.count(changedAttributes) > 0;
+	if(changedAttributes.source || changedAttributes["class"] || changedAttributes.usemap || changedAttributes.tooltip || changedTiddlers[this.imageSource] ||changedAttributes.loadActions) {
 		this.refreshSelf();
 		return true;
-	} else {
+	} else if(hasChangedAttributes) {
+		this.assignAttributes(this.domNodes[0],{
+			sourcePrefix: "data-",
+			destPrefix: "data-"
+		});
+		if(changedAttributes.width) {
+			this.domNodes[0].setAttribute("width",this.getAttribute("width"));
+		}
+		if(changedAttributes.height) {
+			this.domNodes[0].setAttribute("height",this.getAttribute("height"));
+		}
+	}
+	else {
 		return false;
 	}
 };

core/modules/widgets/keyboard.js

@@ -45,8 +45,8 @@ KeyboardWidget.prototype.render = function(parent,nextSibling) {
 	]);
 	// Insert element
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 KeyboardWidget.prototype.handleChangeEvent = function(event) {

core/modules/widgets/link.js

@@ -50,8 +50,8 @@ LinkWidget.prototype.render = function(parent,nextSibling) {
 			destPrefix: "aria-"
 		});
 		parent.insertBefore(domNode,nextSibling);
-		this.renderChildren(domNode,null);
 		this.domNodes.push(domNode);
+		this.renderChildren(domNode,null);
 	}
 };
 
@@ -86,7 +86,7 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 			classes.push(this.linkClasses);
 		}
 	} else if(this.overrideClasses !== "") {
-		classes.push(this.overrideClasses)
+		classes.push(this.overrideClasses);
 	}
 	if(classes.length > 0) {
 		domNode.setAttribute("class",classes.join(" "));
@@ -97,7 +97,7 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 	if(wikilinkTransformFilter) {
 		// Use the filter to construct the href
 		wikiLinkText = this.wiki.filterTiddlers(wikilinkTransformFilter,this,function(iterator) {
-			iterator(self.wiki.getTiddler(self.to),self.to)
+			iterator(self.wiki.getTiddler(self.to),self.to);
 		})[0];
 	} else {
 		// Expand the tv-wikilink-template variable to construct the href
@@ -121,12 +121,12 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 	var tooltipWikiText = this.tooltip || this.getVariable("tv-wikilink-tooltip");
 	if(tooltipWikiText) {
 		var tooltipText = this.wiki.renderText("text/plain","text/vnd.tiddlywiki",tooltipWikiText,{
-				parseAsInline: true,
-				variables: {
-					currentTiddler: this.to
-				},
-				parentWidget: this
-			});
+			parseAsInline: true,
+			variables: {
+				currentTiddler: this.to
+			},
+			parentWidget: this
+		});
 		domNode.setAttribute("title",tooltipText);
 	}
 	if(this.role) {
@@ -135,7 +135,7 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 	this.assignAttributes(domNode,{
 		sourcePrefix: "aria-",
 		destPrefix: "aria-"
-	})
+	});
 	// Add a click event handler
 	$tw.utils.addEventListeners(domNode,[
 		{name: "click", handlerObject: this, handlerMethod: "handleClickEvent"},
@@ -145,6 +145,8 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 		$tw.utils.makeDraggable({
 			domNode: domNode,
 			dragTiddlerFn: function() {return self.to;},
+			startActions: self.startActions,
+			endActions: self.endActions,
 			widget: this
 		});
 	} else if(this.draggable === "no") {
@@ -157,8 +159,8 @@ LinkWidget.prototype.renderLink = function(parent,nextSibling) {
 	});
 	// Insert the link into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 LinkWidget.prototype.handleClickEvent = function(event) {
@@ -203,6 +205,8 @@ LinkWidget.prototype.execute = function() {
 	this.overrideClasses = this.getAttribute("overrideClass");
 	this.tabIndex = this.getAttribute("tabindex");
 	this.draggable = this.getAttribute("draggable","yes");
+	this.startActions = this.getAttribute("startactions");
+	this.endActions = this.getAttribute("endactions");
 	this.linkTag = this.getAttribute("tag","a");
 	// Determine the link characteristics
 	this.isMissing = !this.wiki.tiddlerExists(this.to);

core/modules/widgets/password.js

@@ -42,8 +42,8 @@ PasswordWidget.prototype.render = function(parent,nextSibling) {
 	]);
 	// Insert the label into the DOM and render any children
 	parent.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 };
 
 PasswordWidget.prototype.handleChangeEvent = function(event) {

core/modules/widgets/radio.js

@@ -59,8 +59,8 @@ RadioWidget.prototype.render = function(parent,nextSibling) {
 	]);
 	// Insert the label into the DOM and render any children
 	parent.insertBefore(this.labelDomNode,nextSibling);
-	this.renderChildren(this.spanDomNode,null);
 	this.domNodes.push(this.labelDomNode);
+	this.renderChildren(this.spanDomNode,null);
 };
 
 RadioWidget.prototype.getValue = function() {

core/modules/widgets/reveal.js

@@ -40,6 +40,7 @@ RevealWidget.prototype.render = function(parent,nextSibling) {
 		domNode.setAttribute("style",this.style);
 	}
 	parent.insertBefore(domNode,nextSibling);
+	this.domNodes.push(domNode);
 	this.renderChildren(domNode,null);
 	if(!domNode.isTiddlyWikiFakeDom && this.type === "popup" && this.isOpen) {
 		this.positionPopup(domNode);
@@ -48,7 +49,6 @@ RevealWidget.prototype.render = function(parent,nextSibling) {
 	if(!this.isOpen) {
 		domNode.setAttribute("hidden","true");
 	}
-	this.domNodes.push(domNode);
 };
 
 RevealWidget.prototype.positionPopup = function(domNode) {

core/modules/widgets/scrollable.js

@@ -168,8 +168,8 @@ ScrollableWidget.prototype.render = function(parent,nextSibling) {
 	this.outerDomNode.className = this["class"] || "";
 	// Insert element
 	parent.insertBefore(this.outerDomNode,nextSibling);
-	this.renderChildren(this.innerDomNode,null);
 	this.domNodes.push(this.outerDomNode);
+	this.renderChildren(this.innerDomNode,null);
 	// If the scroll position is bound to a tiddler
 	if(this.scrollableBind) {
 		// After a delay for rendering, scroll to the bound position

core/modules/widgets/select.js

@@ -63,8 +63,8 @@ SelectWidget.prototype.render = function(parent,nextSibling) {
 		domNode.setAttribute("title",this.selectTooltip);
 	}
 	this.parentDomNode.insertBefore(domNode,nextSibling);
-	this.renderChildren(domNode,null);
 	this.domNodes.push(domNode);
+	this.renderChildren(domNode,null);
 	this.setSelectValue();
 	if(this.selectFocus == "yes") {
 		this.getSelectDomNode().focus();
@@ -82,8 +82,8 @@ SelectWidget.prototype.handleChangeEvent = function(event) {
 	if(this.selectMultiple == false) {
 		var value = this.getSelectDomNode().value;
 	} else {
-		var value = this.getSelectValues()
-				value = $tw.utils.stringifyList(value);
+		var value = this.getSelectValues();
+		value = $tw.utils.stringifyList(value);
 	}
 	this.wiki.setText(this.selectTitle,this.selectField,this.selectIndex,value);
 	// Trigger actions
@@ -118,12 +118,21 @@ SelectWidget.prototype.setSelectValue = function() {
 		}
 	}
 	// Assign it to the select element if it's different than the current value
-	if (this.selectMultiple) {
+	if(this.selectMultiple) {
 		value = value === undefined ? "" : value;
 		var select = this.getSelectDomNode();
-		var values = Array.isArray(value) ? value : $tw.utils.parseStringArray(value);
+		var child,
+			values = Array.isArray(value) ? value : $tw.utils.parseStringArray(value);
 		for(var i=0; i < select.children.length; i++){
-			select.children[i].selected = values.indexOf(select.children[i].value) !== -1
+			child=select.children[i];
+			if(child.children.length === 0){
+				child.selected = values.indexOf(child.value) !== -1;
+			} else {
+				// grouped options
+				for(var y=0; y < child.children.length; y++){
+					child.children[y].selected = values.indexOf(child.children[y].value) !== -1;
+				}
+			}
 		}
 	} else {
 		var domNode = this.getSelectDomNode();
@@ -147,14 +156,14 @@ SelectWidget.prototype.getSelectValues = function() {
 	select = this.getSelectDomNode();
 	result = [];
 	options = select && select.options;
-	for (var i=0; i<options.length; i++) {
+	for(var i=0; i<options.length; i++) {
 		opt = options[i];
-		if (opt.selected) {
+		if(opt.selected) {
 			result.push(opt.value || opt.text);
 		}
 	}
 	return result;
-}
+};
 
 /*
 Compute the internal state of the widget
@@ -183,7 +192,7 @@ Selectively refreshes the widget if needed. Returns true if the widget or any of
 SelectWidget.prototype.refresh = function(changedTiddlers) {
 	var changedAttributes = this.computeAttributes();
 	// If we're using a different tiddler/field/index then completely refresh ourselves
-	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tooltip || changedAttributes.tabindex || changedAttributes.disabled) {
+	if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes.tooltip || changedAttributes.default || changedAttributes.tabindex || changedAttributes.disabled) {
 		this.refreshSelf();
 		return true;
 	} else {

core/modules/widgets/setmultiplevariables.js

@@ -12,7 +12,7 @@ Widget to set multiple variables at once from a list of names and a list of valu
 var Widget = require("$:/core/modules/widgets/widget.js").widget;
 
 var SetMultipleVariablesWidget = function(parseTreeNode,options) {
-	this.initialise(parseTreeNode,options);
+    this.initialise(parseTreeNode,options);
 };
 
 /*
@@ -24,52 +24,52 @@ SetMultipleVariablesWidget.prototype = new Widget();
 Render this widget into the DOM
 */
 SetMultipleVariablesWidget.prototype.render = function(parent,nextSibling) {
-	this.parentDomNode = parent;
-	this.computeAttributes();
-	this.execute();
-	this.renderChildren(parent,nextSibling);
+    this.parentDomNode = parent;
+    this.computeAttributes();
+    this.execute();
+    this.renderChildren(parent,nextSibling);
 };
 
 /*
 Compute the internal state of the widget
 */
 SetMultipleVariablesWidget.prototype.execute = function() {
-	// Setup our variables
-	this.setVariables();
-	// Construct the child widgets
-	this.makeChildWidgets();
+    // Setup our variables
+    this.setVariables();
+    // Construct the child widgets
+    this.makeChildWidgets();
 };
 
 
 SetMultipleVariablesWidget.prototype.setVariables = function() {
-	// Set the variables
-	var self = this,
-		filterNames = this.getAttribute("$names",""),
-		filterValues = this.getAttribute("$values","");
-	this.variableNames = [];
-	this.variableValues = [];
-	if(filterNames && filterValues) {
-		this.variableNames = this.wiki.filterTiddlers(filterNames,this,{defaultFilterRunPrefix: "all"});
-		this.variableValues = this.wiki.filterTiddlers(filterValues,this,{defaultFilterRunPrefix: "all"});
-		$tw.utils.each(this.variableNames,function(varname,index) {
-			self.setVariable(varname,self.variableValues[index]);
-		});
-	}
+    // Set the variables
+    var self = this,
+        filterNames = this.getAttribute("$names",""),
+        filterValues = this.getAttribute("$values","");
+    this.variableNames = [];
+    this.variableValues = [];
+    if(filterNames && filterValues) {
+        this.variableNames = this.wiki.filterTiddlers(filterNames,this);
+        this.variableValues = this.wiki.filterTiddlers(filterValues,this);
+        $tw.utils.each(this.variableNames,function(varname,index) {
+            self.setVariable(varname,self.variableValues[index]);
+        });
+    }
 };
 
 /*
 Refresh the widget by ensuring our attributes are up to date
 */
 SetMultipleVariablesWidget.prototype.refresh = function(changedTiddlers) {
-	var filterNames = this.getAttribute("$names",""),
-		filterValues = this.getAttribute("$values",""),
-		variableNames = this.wiki.filterTiddlers(filterNames,this,{defaultFilterRunPrefix: "all"}),
-		variableValues = this.wiki.filterTiddlers(filterValues,this,{defaultFilterRunPrefix: "all"});
-	if(!$tw.utils.isArrayEqual(this.variableNames,variableNames) || !$tw.utils.isArrayEqual(this.variableValues,variableValues)) {
-		this.refreshSelf();
-		return true;
-	}
-	return this.refreshChildren(changedTiddlers);
+    var filterNames = this.getAttribute("$names",""),
+        filterValues = this.getAttribute("$values",""),
+        variableNames = this.wiki.filterTiddlers(filterNames,this),
+        variableValues = this.wiki.filterTiddlers(filterValues,this);
+    if(!$tw.utils.isArrayEqual(this.variableNames,variableNames) || !$tw.utils.isArrayEqual(this.variableValues,variableValues)) {
+        this.refreshSelf();
+        return true;
+    }
+    return this.refreshChildren(changedTiddlers);
 };
 
 exports["setmultiplevariables"] = SetMultipleVariablesWidget;

core/modules/widgets/transclude.js

@@ -32,16 +32,26 @@ TranscludeWidget.prototype.render = function(parent,nextSibling) {
 	} catch(error) {
 		if(error instanceof $tw.utils.TranscludeRecursionError) {
 			// We were infinite looping.
-			// We need to try and abort as much of the loop as we can, so we will keep "throwing" upward until we find a transclusion that has a different signature.
-			// Hopefully that will land us just outside where the loop began. That's where we want to issue an error.
-			// Rendering widgets beneath this point may result in a freezing browser if they explode exponentially.
+			// We need to try and abort as much of the loop as we
+			// can, so we will keep "throwing" upward until we find
+			// a transclusion that has a different signature.
+			// Hopefully that will land us just outside where the
+			// loop began. That's where we want to issue an error.
+			// Rendering widgets beneath this point may result in a
+			// freezing browser if they explode exponentially.
 			var transcludeSignature = this.getVariable("transclusion");
 			if(this.getAncestorCount() > $tw.utils.TranscludeRecursionError.MAX_WIDGET_TREE_DEPTH - 50) {
-				// For the first fifty transcludes we climb up, we simply collect signatures.
-				// We're assuming that those first 50 will likely include all transcludes involved in the loop.
+				// For the first fifty transcludes we climb up,
+				// we simply collect signatures.
+				// We're assuming those first 50 will likely
+				// include all transcludes involved in the loop.
 				error.signatures[transcludeSignature] = true;
 			} else if(!error.signatures[transcludeSignature]) {
-				// Now that we're past the first 50, let's look for the first signature that wasn't in the loop. That'll be where we print the error and resume rendering.
+				// Now that we're past the first 50, look for
+				// the first signature that wasn't in that loop.
+				// That's where we print the error and resume
+				// rendering.
+				this.removeChildDomNodes();
 				this.children = [this.makeChildWidget({type: "error", attributes: {
 					"$message": {type: "string", value: $tw.language.getString("Error/RecursiveTransclusion")}
 				}})];

core/modules/widgets/widget.js

@@ -151,7 +151,7 @@ Widget.prototype.getVariableInfo = function(name,options) {
 		} else if(variable.isFunctionDefinition) {
 			// Function evaluations
 			params = self.resolveVariableParameters(variable.params,actualParams);
-			var variables = options.variables || Object.create(null);
+			var variables = $tw.utils.extend({},options.variables);
 			// Apply default parameter values
 			$tw.utils.each(variable.params,function(param,index) {
 				if(param["default"]) {
@@ -160,7 +160,7 @@ Widget.prototype.getVariableInfo = function(name,options) {
 			});
 			// Parameters are an array of {name:, value:, multivalue:} pairs (name and multivalue are optional)
 			$tw.utils.each(params,function(param) {
-				if(param.multiValue) {
+				if(param.multiValue && param.multiValue.length) {
 					variables[param.name] = param.multiValue;
 				} else {
 					variables[param.name] = param.value || "";
@@ -233,8 +233,10 @@ Widget.prototype.resolveVariableParameters = function(formalParams,actualParams)
 			paramMultiValue = typeof param === "string" ? [param] : (param.multiValue || [paramValue]);
 		}
 		// If we've still not got a value, use the default, if any
-		paramValue = paramValue || paramInfo["default"] || "";
-		paramMultiValue = paramMultiValue || [paramValue];
+		if(!paramValue) {
+			paramValue = paramInfo["default"] || "";
+			paramMultiValue = [paramValue];
+		}
 		// Store the parameter name and value
 		results.push({name: paramInfo.name, value: paramValue, multiValue: paramMultiValue});
 	}
@@ -341,7 +343,7 @@ Widget.prototype.makeFakeWidgetWithVariables = function(variables) {
 				}
 			} else {
 				opts = opts || {};
-				opts.variables = variables;
+				opts.variables = $tw.utils.extend({},variables,opts.variables);
 				return self.getVariable(name,opts);
 			};
 		},
@@ -414,7 +416,21 @@ Widget.prototype.computeAttribute = function(attribute,options) {
 			value = [value];
 		}
 	} else if(attribute.type === "macro") {
-		var variableInfo = this.getVariableInfo(attribute.value.name,{params: attribute.value.params});
+		// Get the macro name
+		var macroName = attribute.value.attributes["$variable"].value;
+		// Collect macro parameters
+		var params = [];
+		$tw.utils.each(attribute.value.orderedAttributes,function(attr) {
+			var param = {
+				value: self.computeAttribute(attr)
+			};
+			if(attr.name && !attr.isPositional) {
+				param.name = attr.name;
+			}
+			params.push(param);
+		});
+		// Invoke the macro
+		var variableInfo = this.getVariableInfo(macroName,{params: params});
 		if(options.asList) {
 			value = variableInfo.resultList;
 		} else {
@@ -771,9 +787,9 @@ Widget.prototype.findNextSiblingDomNode = function(startIndex) {
 	// Refer to this widget by its index within its parents children
 	var parent = this.parentWidget,
 		index = startIndex !== undefined ? startIndex : parent.children.indexOf(this);
-if(index === -1) {
-	throw "node not found in parents children";
-}
+	if(index === -1) {
+		throw "node not found in parents children";
+	}
 	// Look for a DOM node in the later siblings
 	while(++index < parent.children.length) {
 		var domNode = parent.children[index].findFirstDomNode();
@@ -811,21 +827,60 @@ Widget.prototype.findFirstDomNode = function() {
 };
 
 /*
-Remove any DOM nodes created by this widget or its children
+Entry into destroy procedure
+options include:
+	removeDOMNodes: boolean (default true)
+*/
+Widget.prototype.destroyChildren = function(options) {
+	$tw.utils.each(this.children,function(childWidget) {
+		childWidget.destroy(options);
+	});
+};
+
+/*
+Legacy entry into destroy procedure
 */
 Widget.prototype.removeChildDomNodes = function() {
-	// If this widget has directly created DOM nodes, delete them and exit. This assumes that any child widgets are contained within the created DOM nodes, which would normally be the case
-	if(this.domNodes.length > 0) {
-		$tw.utils.each(this.domNodes,function(domNode) {
-			domNode.parentNode.removeChild(domNode);
-		});
-		this.domNodes = [];
-	} else {
-		// Otherwise, ask the child widgets to delete their DOM nodes
-		$tw.utils.each(this.children,function(childWidget) {
-			childWidget.removeChildDomNodes();
-		});
+	this.destroy({removeDOMNodes: true});
+};
+
+/*
+Default destroy
+options include:
+- removeDOMNodes: boolean (default true)
+*/
+Widget.prototype.destroy = function(options) {
+	const { removeDOMNodes = true } = options || {};
+	let removeChildDOMNodes = removeDOMNodes;
+	if(removeDOMNodes && this.domNodes.length > 0) {
+		// If this widget will remove its own DOM nodes, children should not remove theirs
+		removeChildDOMNodes = false;
 	}
+	// Destroy children first
+	this.destroyChildren({removeDOMNodes: removeChildDOMNodes});
+	this.children = [];
+	
+	// Call custom cleanup method if implemented
+	if(typeof this.onDestroy === "function") {
+		this.onDestroy();
+	}
+	
+	// Remove our DOM nodes if needed
+	if(removeDOMNodes) {
+		this.removeLocalDomNodes();	
+	}
+};
+
+/*
+Remove any DOM nodes created by this widget 
+*/
+Widget.prototype.removeLocalDomNodes = function() {
+	for(const domNode of this.domNodes) {
+		if(domNode.parentNode) {
+			domNode.parentNode.removeChild(domNode);
+		}
+	}
+	this.domNodes = [];
 };
 
 /*

core/modules/wiki.js

@@ -1122,15 +1122,16 @@ Parse a block of text of a specified MIME type
 Options include:
 	substitutions: an optional array of substitutions
 */
-exports.getSubstitutedText = function(text,widget,options) {
+exports.getSubstitutedText = function(text,thisWidget,options) {
 	options = options || {};
 	text = text || "";
 	var self = this,
+		widgetClass = widget.widget,
 		substitutions = options.substitutions || [],
 		output;
 	// Evaluate embedded filters and substitute with first result
 	output = text.replace(/\$\{([\S\s]+?)\}\$/g, function(match,filter) {
-		return self.filterTiddlers(filter,widget)[0] || "";
+		return self.filterTiddlers(filter,thisWidget)[0] || "";
 	});
 	// Process any substitutions provided in options
 	$tw.utils.each(substitutions,function(substitute) {
@@ -1138,7 +1139,7 @@ exports.getSubstitutedText = function(text,widget,options) {
 	});
 	// Substitute any variable references with their values
 	return output.replace(/\$\((.+?)\)\$/g, function(match,varname) {
-		return widget.getVariable(varname,{defaultValue: ""});
+		return widgetClass.evaluateVariable(thisWidget,varname, {defaultValue: ""})[0];
 	});
 };
 
@@ -1663,12 +1664,14 @@ exports.addToStory = function(title,fromTitle,storyTitle,options) {
 Generate a title for the draft of a given tiddler
 */
 exports.generateDraftTitle = function(title) {
-	var c = 0,
-		draftTitle,
-		username = this.getTiddlerText("$:/status/UserName"),
-		attribution = username ? " by " + username : "";
+	let c = 0,
+		draftTitle;
+	const username = this.getTiddlerText("$:/status/UserName");
 	do {
-		draftTitle = "Draft " + (c ? (c + 1) + " " : "") + "of '" + title + "'" + attribution;
+		draftTitle = username ? $tw.language.getString("Draft/Attribution", {variables: {"draft-title": title}}) : $tw.language.getString("Draft/Title", {variables: {"draft-title": title}});
+		if(c) {
+			draftTitle = draftTitle.concat(" ", (c + 1).toString());
+		}
 		c++;
 	} while(this.tiddlerExists(draftTitle));
 	return draftTitle;

core/palettes/AutoToggle.tid

@@ -1,10 +0,0 @@
-title: $:/palettes/AutoToggle
-name: AutoToggle
-description: Automatically switch between dark and light modes
-tags: $:/tags/Palette
-type: application/x-tiddler-dictionary
-color-scheme: [{$:/info/browser/darkmode}!match[yes]then[light]else[dark]]
-settings: $:/palettes/AutoToggle/Settings
-palette-import@light: $:/palettes/TwentyTwenties
-palette-import@dark: $:/palettes/TwentyTwentiesDark
-category: 2026

core/palettes/AutoToggleSettings.tid

@@ -1,19 +0,0 @@
-title: $:/palettes/AutoToggle/Settings
-
-\procedure set-imported-palette(field)
-<$select field=<<field>>>
-	<$list filter="[all[shadows+tiddlers]tag[$:/tags/Palette]sort[name]] -[<currentTiddler>]">
-		<option value=<<currentTiddler>>><$view field="name"><$view field="title"/></$view></option>
-	</$list>
-</$select>
-\end set-imported-palette
-
-This palette can be used to automatically switch between two palettes based on the browser's dark mode setting.
-
-<$tiddler tiddler={{$:/palette}}>
-
-Light palette: <<set-imported-palette field:"palette-import@light">>
-
-Dark palette: <<set-imported-palette field:"palette-import@dark">>
-
-</$tiddler>

core/palettes/Blanca.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/Blanca
 name: Blanca
-category: Legacy
 color-scheme: light
 description: A clean white palette to let you focus
 tags: $:/tags/Palette

core/palettes/Blue.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/Blue
 name: Blue
-category: Legacy
 color-scheme: light
 description: A blue theme
 tags: $:/tags/Palette

core/palettes/BrightMute.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/Muted
 name: Muted
-category: Legacy
 color-scheme: light
 description: Bright tiddlers on a muted background
 tags: $:/tags/Palette

core/palettes/ContrastDark.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/ContrastDark
 name: Contrast (Dark)
-category: Legacy
 color-scheme: dark
 description: High contrast and unambiguous (dark version)
 tags: $:/tags/Palette

core/palettes/ContrastLight.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/ContrastLight
 name: Contrast (Light)
-category: Legacy
 color-scheme: light
 description: High contrast and unambiguous (light version)
 tags: $:/tags/Palette

core/palettes/CupertinoDark.tid

@@ -2,7 +2,6 @@ title: $:/palettes/CupertinoDark
 tags: $:/tags/Palette
 color-scheme: dark
 name: Cupertino Dark
-category: Legacy
 description: A macOS inspired dark palette
 type: application/x-tiddler-dictionary
 

core/palettes/DarkPhotos.tid

@@ -2,7 +2,6 @@ created: 20150402111612188
 description: Good with dark photo backgrounds
 modified: 20150402112344080
 name: DarkPhotos
-category: Legacy
 tags: $:/tags/Palette
 title: $:/palettes/DarkPhotos
 type: application/x-tiddler-dictionary

core/palettes/DesertSand.tid

@@ -2,7 +2,6 @@ title: $:/palettes/DesertSand
 tags: $:/tags/Palette
 color-scheme: light
 name: Desert Sand
-category: Legacy
 description: A desert sand palette
 type: application/x-tiddler-dictionary
 

core/palettes/FlexokiDark.tid

@@ -1,7 +1,6 @@
 color-scheme: dark
 description: An inky color scheme for prose and code
 name: FlexokiDark
-category: Legacy
 tags: $:/tags/Palette
 title: $:/palettes/FlexokiDark
 type: application/x-tiddler-dictionary

core/palettes/FlexokiLight.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/FlexokiLight
 name: FlexokiLight
-category: Legacy
 description: An inky color scheme for prose and code
 tags: $:/tags/Palette
 type: application/x-tiddler-dictionary

core/palettes/GruvBoxDark.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/GruvboxDark
 name: Gruvbox Dark
-category: Legacy
 color-scheme: dark
 description: Retro groove color scheme
 tags: $:/tags/Palette

core/palettes/Nord.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/Nord
 name: Nord
-category: Legacy
 color-scheme: dark
 description: An arctic, north-bluish color palette.
 tags: $:/tags/Palette

core/palettes/Rocker.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/Rocker
 name: Rocker
-category: Legacy
 color-scheme: dark
 description: A dark theme
 tags: $:/tags/Palette

core/palettes/SolarFlare.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/SolarFlare
 name: Solar Flare
-category: Legacy
 color-scheme: light
 description: Warm, relaxing earth colours
 tags: $:/tags/Palette

core/palettes/SolarizedDark.tid

@@ -1,6 +1,5 @@
 title: $:/palettes/SolarizedDark
 tags: $:/tags/Palette
-category: Legacy
 type: application/x-tiddler-dictionary
 description: Precision dark colors for machines and people
 license: MIT, Ethan Schoonover, https://github.com/altercation/solarized/blob/master/LICENSE

core/palettes/SolarizedLight.tid

@@ -4,7 +4,6 @@ type: application/x-tiddler-dictionary
 description: Precision colors for machines and people
 license: MIT, Ethan Schoonover, https://github.com/altercation/solarized/blob/master/LICENSE
 name: SolarizedLight
-category: Legacy
 color-scheme: light
 
 alert-background: #eee8d5

core/palettes/SpartanDay.tid

@@ -4,7 +4,6 @@ type: application/x-tiddler-dictionary
 description: Cold, spartan day colors
 name: Spartan Day
 color-scheme: light
-category: Legacy
 
 alert-background: <<colour background>>
 alert-border: <<colour very-muted-foreground>>

core/palettes/SpartanNight.tid

@@ -4,7 +4,6 @@ type: application/x-tiddler-dictionary
 description: Dark spartan colors
 name: Spartan Night
 color-scheme: dark
-category: Legacy
 
 alert-background: <<colour background>>
 alert-border: <<colour very-muted-foreground>>

core/palettes/TwentyTwenties.tid

@@ -1,226 +0,0 @@
-title: $:/palettes/TwentyTwenties
-name: TwentyTwenties
-description: Modern and flexible
-tags: $:/tags/Palette
-type: application/x-tiddler-dictionary
-color-scheme: light
-settings: $:/palettes/TwentyTwenties/Settings
-palette-import: $:/palettes/Vanilla
-category: 2026
-
-# Background and foreground colours, which are interpolated as required
-base-paper: #FFFCF0
-base-background: #edcec1
-base-ink: #333344
-?base-paper-ink: [tf.check-colour-contrast[base-paper],[base-ink],[45]]
-?base-background-ink: [tf.check-colour-contrast[base-background],[base-ink],[45]]
-
-# Primary colour, used for links and other accented elements
-base-primary: #5778d8
-?base-paper-primary: [tf.check-colour-contrast[base-paper],[base-primary],[45]]
-?base-background-primary: [tf.check-colour-contrast[base-background],[base-primary],[45]]
-
-# Secondary colour, used for alerts and other secondary elements
-base-secondary: #f0e48a
-?base-ink-secondary: [tf.check-colour-contrast[base-ink],[base-secondary],[45]]
-
-# Tertiary base colour, used for monospaced text and other tertiary elements
-base-tertiary: rgb(183, 95, 95)
-?base-paper-tertiary: [tf.check-colour-contrast[base-paper],[base-tertiary],[45]]
-
-# Basic spectrum colours
-base-black: #100F0F
-base-red: #D14D41
-base-orange: #DA702C
-base-yellow: #D0A215
-base-green: #879A39
-base-cyan: #3AA99F
-base-blue: #4385BE
-base-purple: #8B7EC8
-base-magenta: #CE5D97
-base-white: #FFFCF0
-# Darker variants
-# base-red: #AF3029
-# base-orange: #BC5215
-# base-yellow: #AD8301
-# base-green: #66800B
-# base-cyan: #24837B
-# base-blue: #205EA6
-# base-purple: #5E409D
-# base-magenta: #A02F6F
-
-# Palette definitions
-alert-background: [tf.colour[base-secondary]]
-alert-border: [tf.interpolate-colours[base-ink],[alert-background],[0.6]]
-alert-highlight: [tf.interpolate-colours[base-ink],[base-primary],[0.3]]
-alert-muted-foreground: [tf.interpolate-colours[base-ink],[alert-background],[0.4]]
-background: [tf.colour[base-paper]]
-blockquote-bar: [tf.colour[muted-foreground]]
-button-background: 
-button-border: 
-button-foreground: 
-code-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]]
-code-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]]
-code-foreground: [tf.colour[base-tertiary]]
-diff-delete-background: [tf.colour[base-red]]
-diff-delete-foreground: [tf.colour[foreground]]
-diff-equal-background: 
-diff-equal-foreground: [tf.colour[foreground]]
-diff-insert-background: [tf.colour[base-green]]
-diff-insert-foreground: [tf.colour[foreground]]
-diff-invisible-background: 
-diff-invisible-foreground: [tf.colour[muted-foreground]]
-dirty-indicator: [tf.colour[base-tertiary]]
-download-background: [tf.interpolate-colours[base-paper],[base-green],[0.6]]
-download-foreground: [tf.interpolate-colours[base-ink],[base-green],[0.1]]
-dragger-background: [tf.colour[foreground]]
-dragger-foreground: [tf.colour[background]]
-dropdown-background: [tf.colour[background]]
-dropdown-border: [tf.colour[muted-foreground]]
-dropdown-tab-background-selected: [tf.colour[background]]
-dropdown-tab-background: [tf.interpolate-colours[base-paper],[base-ink],[0.9]]
-dropzone-background: [tf.colour[base-secondary]colour-set-alpha[0.7]]
-external-link-background-hover: inherit
-external-link-background-visited: inherit
-external-link-background: inherit
-external-link-foreground-hover: inherit
-external-link-foreground-visited: [tf.colour[primary]]
-external-link-foreground: [tf.colour[primary]]
-footnote-target-background: [tf.interpolate-colours[base-paper],[base-ink],[0.2]]
-foreground: [tf.colour[base-ink]]
-highlight-background: [tf.interpolate-colours[base-paper],[base-yellow],[0.5]]
-highlight-foreground: [tf.interpolate-colours[base-yellow],[base-ink],[0.8]]
-menubar-background: #5778d8
-menubar-foreground: #fff
-message-background: [tf.interpolate-colours[base-paper],[base-blue],[0.2]]
-message-border: [tf.interpolate-colours[base-blue],[base-ink],[0.5]]
-message-foreground: [tf.interpolate-colours[base-blue],[base-ink],[0.8]]
-modal-backdrop: [tf.colour[foreground]]
-modal-background: [tf.colour[background]]
-modal-border: #999999
-modal-footer-background: #f5f5f5
-modal-footer-border: #dddddd
-modal-header-border: #eeeeee
-muted-foreground: [tf.interpolate-colours[base-paper],[base-ink],[0.3]]
-network-activity-foreground: #448844
-notification-background: [tf.colour[base-tertiary]colour-set-oklch:l[0.9]]
-notification-border: [tf.colour[base-tertiary]colour-set-oklch:l[0.2]]
-page-background: [tf.colour[base-background]]
-pre-background: [tf.interpolate-colours[base-paper],[base-tertiary],[0.1]]
-pre-border: [tf.interpolate-colours[base-paper],[base-tertiary],[0.6]]
-primary: [tf.colour[base-primary]]
-select-tag-background: 
-select-tag-foreground: 
-selection-background: 
-selection-foreground: 
-sidebar-button-foreground: [tf.colour[sidebar-controls-foreground]]
-sidebar-controls-foreground-hover: [tf.interpolate-colours[base-ink],[base-background],[0.2]]
-sidebar-controls-foreground: [tf.interpolate-colours[base-ink],[base-background],[0.8]]
-sidebar-foreground-shadow: inherit
-sidebar-foreground: =[tf.colour[base-ink]] =[tf.colour[base-paper]] =[tf.colour[base-background]] +[colour-best-contrast:DeltaPhi[]]
-sidebar-muted-foreground-hover: [tf.colour[sidebar-muted-foreground]colour-set-oklch:l[0.3]]
-sidebar-muted-foreground: [tf.interpolate-colours[foreground],[page-background],[0.6]]
-sidebar-tab-background-selected: [tf.colour[tab-background-selected]]
-sidebar-tab-background: [tf.colour[tab-background]]
-sidebar-tab-border-selected: [tf.colour[tab-border-selected]]
-sidebar-tab-border: [tf.colour[tab-border]]
-sidebar-tab-divider: [tf.colour[tab-divider]]
-sidebar-tab-foreground-selected: [tf.colour[tab-foreground-selected]]
-sidebar-tab-foreground: [tf.colour[tab-foreground]]
-sidebar-tiddler-link-foreground-hover: [tf.colour[sidebar-tiddler-link-foreground]colour-set-oklch:l[0.5]]
-sidebar-tiddler-link-foreground: =[tf.colour[base-primary]] =[tf.colour[base-secondary]] =[tf.colour[base-tertiary]] =[tf.colour[base-background]] +[colour-best-contrast:DeltaPhi[]]
-site-title-foreground: [tf.colour[tiddler-title-foreground]]
-stability-deprecated: #ff0000
-stability-experimental: #c07c00
-stability-legacy: #0000ff
-stability-stable: #008000
-static-alert-foreground: #aaaaaa
-tab-background-selected: [tf.colour[background]]
-tab-background: [tf.interpolate-colours[base-paper],[base-ink],[0.2]]
-tab-border-selected: [tf.colour[muted-foreground]]
-tab-border: [tf.colour[muted-foreground]]
-tab-divider: [tf.colour[muted-foreground]]
-tab-foreground-selected: [tf.colour[tab-foreground]]
-tab-foreground: [tf.colour[foreground]]
-table-border: [tf.colour[foreground]]
-table-footer-background: [tf.interpolate-colours[background],[foreground],[0.2]]
-table-header-background: [tf.interpolate-colours[background],[foreground],[0.1]]
-tag-background: [tf.interpolate-colours[base-paper],[base-yellow],[0.9]]
-tag-foreground: [tf.interpolate-colours[base-yellow],[base-ink],[0.8]]
-testcase-accent-level-1: #c1eaff
-testcase-accent-level-2: #E3B740
-testcase-accent-level-3: #5FD564
-tiddler-background: [tf.colour[background]]
-tiddler-border: [tf.interpolate-colours[base-paper],[base-background],[0.5]]
-tiddler-controls-foreground-hover: [tf.interpolate-colours[background],[foreground],[0.7]]
-tiddler-controls-foreground-selected: [tf.interpolate-colours[background],[foreground],[0.9]]
-tiddler-controls-foreground: [tf.interpolate-colours[background],[foreground],[0.5]]
-tiddler-editor-background: #f8f8f8
-tiddler-editor-border-image: #ffffff
-tiddler-editor-border: #cccccc
-tiddler-editor-fields-even: #e0e8e0
-tiddler-editor-fields-odd: #f0f4f0
-tiddler-info-background: #f8f8f8
-tiddler-info-border: #dddddd
-tiddler-info-tab-background: #f8f8f8
-tiddler-link-background: [tf.colour[background]]
-tiddler-link-foreground: [tf.colour[primary]]
-tiddler-subtitle-foreground: [tf.interpolate-colours[background],[foreground],[0.6]]
-tiddler-title-foreground: [tf.interpolate-colours[background],[foreground],[0.9]]
-toolbar-cancel-button: 
-toolbar-close-button: 
-toolbar-delete-button: 
-toolbar-done-button: 
-toolbar-edit-button: 
-toolbar-info-button: 
-toolbar-new-button: 
-toolbar-options-button: 
-toolbar-save-button: 
-tour-chooser-button-foreground: <<colour very-muted-foreground>>
-tour-chooser-button-hover-background: <<colour muted-foreground>>
-tour-chooser-button-hover-foreground: : <<colour background>>
-tour-chooser-button-selected-background: <<colour primary>>
-tour-chooser-button-selected-foreground: <<colour background>>
-tour-chooser-dropdown-foreground: <<colour very-muted-foreground>>
-tour-chooser-item-background: <<colour background>>
-tour-chooser-item-border: <<colour muted-foreground>>
-tour-chooser-item-foreground: <<colour foreground>>
-tour-chooser-item-shadow: <<colour muted-foreground>>
-tour-chooser-item-start-background: <<colour download-background>>
-tour-chooser-item-start-foreground: <<colour background>>
-tour-chooser-item-start-hover-background: <<colour primary>>
-tour-chooser-item-start-hover-foreground: <<colour background>>
-tour-fullscreen-background: <<colour page-background>>
-tour-fullscreen-controls-foreground: <<colour muted-foreground>>
-tour-navigation-buttons-back-background: red
-tour-navigation-buttons-back-foreground: white
-tour-navigation-buttons-hint-background: purple
-tour-navigation-buttons-hint-foreground: white
-tour-navigation-buttons-hover-background: <<colour foreground>>
-tour-navigation-buttons-hover-foreground: <<colour background>>
-tour-navigation-buttons-next-background: purple
-tour-navigation-buttons-next-foreground: white
-tour-overlay-background: #cbfff8
-tour-overlay-border: #228877
-tour-step-heading-background: none
-tour-step-task-background: <<colour download-background>>
-tour-step-task-foreground: <<colour download-foreground>>
-untagged-background: #999999
-very-muted-foreground: #888888
-wikilist-background: #e5e5e5
-wikilist-button-background: #acacac
-wikilist-button-foreground: #000000
-wikilist-button-open-hover: green
-wikilist-button-open: #4fb82b
-wikilist-button-remove-hover: red
-wikilist-button-remove: #d85778
-wikilist-button-reveal-hover: blue
-wikilist-button-reveal: #5778d8
-wikilist-droplink-dragover: [tf.colour[base-secondary]colour-set-alpha[0.7]]
-wikilist-info: #000000
-wikilist-item: #ffffff
-wikilist-title-svg: [tf.colour[wikilist-title]]
-wikilist-title: #666666
-wikilist-toolbar-background: #d3d3d3
-wikilist-toolbar-foreground: #888888
-wikilist-url: #aaaaaa

core/palettes/TwentyTwentiesDark.tid

@@ -1,12 +0,0 @@
-title: $:/palettes/TwentyTwenties/Dark
-name: TwentyTwenties Dark
-description: Modern and flexible, Darkish
-tags: $:/tags/Palette
-type: application/x-tiddler-dictionary
-color-scheme: dark
-palette-import: $:/palettes/TwentyTwenties
-category: 2026
-
-base-paper: #111122
-base-background: #f5f0f9
-base-ink: #8C8F80

core/palettes/TwentyTwentiesGreen.tid

@@ -1,12 +0,0 @@
-title: $:/palettes/TwentyTwenties/Green
-name: TwentyTwenties (Green)
-description: Modern and flexible, Greenish
-tags: $:/tags/Palette
-type: application/x-tiddler-dictionary
-color-scheme: light
-palette-import: $:/palettes/TwentyTwenties
-category: 2026
-
-base-paper: rgb(188, 255, 161)
-base-background: rgb(94, 192, 145)
-base-primary: #6e803c

core/palettes/TwentyTwentiesGreenP3.tid

@@ -1,13 +0,0 @@
-title: $:/palettes/TwentyTwenties/GreenP3
-name: TwentyTwenties (Green P3)
-description: Modern and flexible, Greenish and super bright
-tags: $:/tags/Palette
-type: application/x-tiddler-dictionary
-color-scheme: light
-palette-import: $:/palettes/TwentyTwenties
-category: 2026
-
-base-paper: color(display-p3 0.281 1 0.584 / 1)
-base-background: color(display-p3 1 1 0 / 1)
-base-primary: color(display-p3 1 0.563 1 / 1)
-

core/palettes/TwentyTwentiesSettings.tid

@@ -1,17 +0,0 @@
-title: $:/palettes/TwentyTwenties/Settings
-
-\procedure entry(name,description)
-<$text text=<<description>>/>: <$edit-text tiddler={{$:/palette}} index=<<name>> type="color" tag="input" default={{{ [function[colour],<name>] }}}/>
-\end entry
-
-<<entry name:"base-paper" description:"Paper">>
-
-<<entry name:"base-background" description:"Page background">>
-
-<<entry name:"base-ink" description:"Ink">>
-
-<<entry name:"base-primary" description:"Primary">>
-
-<<entry name:"base-secondary" description:"Secondary">>
-
-<<entry name:"base-tertiary" description:"Tertiary">>

core/palettes/Twilight.tid

@@ -5,7 +5,6 @@ type: application/x-tiddler-dictionary
 name: Twilight
 description: Delightful, soft darkness.
 color-scheme: dark
-category: Legacy
 
 alert-background: rgb(255, 255, 102)
 alert-border: rgb(232, 232, 125)

core/palettes/Vanilla.tid

@@ -4,7 +4,6 @@ description: Pale and unobtrusive
 tags: $:/tags/Palette
 type: application/x-tiddler-dictionary
 color-scheme: light
-category: Legacy
 
 alert-background: #ffe476
 alert-border: #b99e2f

core/palettes/VanillaCherry.tid

@@ -1,12 +0,0 @@
-title: $:/palettes/VanillaCherry
-name: Vanilla Cherry
-category: 2026
-description: Pale and unobtrusive with a cherry on top
-tags: $:/tags/Palette
-type: application/x-tiddler-dictionary
-color-scheme: light
-palette-import: $:/palettes/Vanilla
-
-primary:rgb(224, 32, 86);
-menubar-foreground: #fff
-menubar-background: <<colour primary>>

core/palettes/background/contrast-tests.tid

@@ -1,7 +0,0 @@
-title: $:/palettes/background/contrast-tests
-type: application/x-tiddler-dictionary
-tags: $:/tags/BackgroundPalette
-
-?background-foreground-contrast: [tf.check-colour-contrast[background],[foreground],[45]]
-?alert-contrast: [tf.check-colour-contrast[alert-background],[foreground],[45]]
-?code-contrast: [tf.check-colour-contrast[code-background],[code-foreground],[45]]

core/stylesheets/custom-properties.tid

@@ -0,0 +1,30 @@
+title: $:/core/stylesheets/custom-properties
+
+\rules only transcludeinline macrocallinline html transcludeblock
+
+/* Tiddlywiki's CSS properties */
+
+:root {
+	<$list filter="[[$:/palettes/Vanilla]indexes[]]">
+	--tpc-<<currentTiddler>>: <$transclude $variable="colour" $mode="inline" name=<<currentTiddler>>/>;
+	</$list>
+
+	/* CSS settings */
+	--tp-code-wrapping: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};
+	--tp-font-family: {{$:/themes/tiddlywiki/vanilla/settings/fontfamily}};
+	--tp-code-font-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};
+	--tp-editor-font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
+	--tp-font-size: {{$:/themes/tiddlywiki/vanilla/metrics/fontsize}};
+	--tp-line-height: {{$:/themes/tiddlywiki/vanilla/metrics/lineheight}};
+	--tp-body-font-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}};
+	--tp-body-line-height: {{$:/themes/tiddlywiki/vanilla/metrics/bodylineheight}};
+	--tp-story-left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
+	--tp-story-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
+	--tp-story-right: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
+	--tp-story-width: {{$:/themes/tiddlywiki/vanilla/metrics/storyrwidth}};
+	--tp-tiddler-width: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}};
+	--tp-sidebar-breakpoint: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}};
+	--tp-sidebar-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
+
+	--tp-animation-duration: {{{ [{$:/config/AnimationDuration}addsuffix[ms]] }}};
+}

core/ui/ControlPanel/Appearance.tid

@@ -6,5 +6,5 @@ caption: {{$:/language/ControlPanel/Appearance/Caption}}
 {{$:/language/ControlPanel/Appearance/Hint}}
 
 <div class="tc-control-panel">
-<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/ControlPanel/Appearance]!has[draft.of]]" default="$:/core/ui/ControlPanel/Palette" explicitState="$:/state/tab--1963855381"/>
+<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/ControlPanel/Appearance]!has[draft.of]]" default="$:/core/ui/ControlPanel/Theme" explicitState="$:/state/tab--1963855381"/>
 </div>

core/ui/ControlPanel/Basics.tid

@@ -18,6 +18,7 @@ caption: {{$:/language/ControlPanel/Basics/Caption}}
 |<$link to="$:/config/NewTiddler/Tags"><<lingo NewTiddler/Tags/Prompt>></$link> |<$vars currentTiddler="$:/config/NewTiddler/Tags" tagField="text">{{||$:/core/ui/EditTemplate/tags}}<$list filter="[<currentTiddler>tags[]] +[limit[1]]" variable="ignore"><$button tooltip={{$:/language/ControlPanel/Basics/RemoveTags/Hint}}><<lingo RemoveTags>><$action-listops $tiddler=<<currentTiddler>> $field="text" $subfilter={{{ [<currentTiddler>get[tags]] }}}/><$action-setfield $tiddler=<<currentTiddler>> tags=""/></$button></$list></$vars> |
 |<$link to="$:/config/NewJournal/Tags"><<lingo NewJournal/Tags/Prompt>></$link> |<$vars currentTiddler="$:/config/NewJournal/Tags" tagField="text">{{||$:/core/ui/EditTemplate/tags}}<$list filter="[<currentTiddler>tags[]] +[limit[1]]" variable="ignore"><$button tooltip={{$:/language/ControlPanel/Basics/RemoveTags/Hint}}><<lingo RemoveTags>><$action-listops $tiddler=<<currentTiddler>> $field="text" $subfilter={{{ [<currentTiddler>get[tags]] }}}/><$action-setfield $tiddler=<<currentTiddler>> tags=""/></$button></$list></$vars> |
 |<$link to="$:/config/AutoFocus"><<lingo AutoFocus/Prompt>></$link> |{{$:/snippets/minifocusswitcher}} |
+|<$link to="$:/config/AutoFocusEdit"><<lingo AutoFocusEdit/Prompt>></$link> |{{$:/snippets/minifocuseditswitcher}} |
 |<<lingo Language/Prompt>> |{{$:/snippets/minilanguageswitcher}} |
 |<<lingo Tiddlers/Prompt>> |<<show-filter-count "[!is[system]sort[title]]">> |
 |<<lingo Tags/Prompt>> |<<show-filter-count "[tags[]sort[title]]">> |

core/ui/ControlPanel/Palette.tid

@@ -2,4 +2,20 @@ title: $:/core/ui/ControlPanel/Palette
 tags: $:/tags/ControlPanel/Appearance
 caption: {{$:/language/ControlPanel/Palette/Caption}}
 
-{{$:/PaletteManager}}
+\define lingo-base() $:/language/ControlPanel/Palette/
+
+{{$:/snippets/paletteswitcher}}
+
+<$reveal type="nomatch" state="$:/state/ShowPaletteEditor" text="yes">
+
+<$button set="$:/state/ShowPaletteEditor" setTo="yes"><<lingo ShowEditor/Caption>></$button>
+
+</$reveal>
+
+<$reveal type="match" state="$:/state/ShowPaletteEditor" text="yes">
+
+<$button set="$:/state/ShowPaletteEditor" setTo="no"><<lingo HideEditor/Caption>></$button>
+{{$:/PaletteManager}}
+
+</$reveal>
+

core/ui/EditTemplate/body-editor.tid

@@ -8,7 +8,7 @@ title: $:/core/ui/EditTemplate/body/editor
   class="tc-edit-texteditor tc-edit-texteditor-body"
   placeholder={{$:/language/EditTemplate/Body/Placeholder}}
   tabindex={{$:/config/EditTabIndex}}
-  focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}}
+  focus={{{ [{!!draft.of}is[tiddler]then{$:/config/AutoFocusEdit}match[text]then[true]] ~[{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}}
   cancelPopups="yes"
   fileDrop={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}}
 

core/ui/EditTemplate/body-toolbar-button.tid

@@ -103,9 +103,9 @@ title: $:/core/ui/EditTemplate/body/toolbar/button
 <$set
 
   name="buttonClasses"
-  value={{!!button-classes}}
+  value={{{ [subfilter{!!button-classes}] :and[join[ ]] }}}
 
 ><<toolbar-button>></$set>
 \end
 
-<<toolbar-button-outer>>
+<<toolbar-button-outer>>

core/ui/EditTemplate/fields.tid

@@ -1,157 +1,181 @@
 title: $:/core/ui/EditTemplate/fields
 tags: $:/tags/EditTemplate
 
-\procedure lingo-base() $:/language/EditTemplate/
-\function tf.config-title() [[$:/config/EditTemplateFields/Visibility/]addsuffix[$(currentField)$]substitute[]get[text]]
-
-\function tf.config-filter() [[hide]] :except[title<tf.config-title>]
-
-<!-- Beware this is duplicated from EditTemplate.tid. For details see bug #7054 -->
-\procedure get-field-value-tiddler-filter() [subfilter<get-field-editor-filter>sha256[16]addprefix[/]addprefix<newFieldValueTiddlerPrefix>]
-\procedure get-field-editor-filter() [<newFieldNameTiddler>get[text]else[]] :cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]] :and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}]
-
-\procedure prefix.bracket() [
-\procedure suffix.bracket() ]
-
-\function tf.current-tiddler-new-field-selector() [[data-tiddler-title=]addprefix[$(prefix.bracket)$]substitute[]addsuffix<currentTiddlerCSSescaped>addsuffix[$(suffix.bracket)$]substitute[]] .tc-edit-field-add-name-wrapper input :and[join[ ]]
-
-\procedure new-field-actions()
 \whitespace trim
-<$action-sendmessage $message="tm-add-field" $name={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldNameTiddler>get[text]] :map[subfilter<get-field-value-tiddler-filter>get[text]] }}}/>
-<$set name="safeNewFieldValueTiddlerPrefix" value=<<newFieldValueTiddlerPrefix>> emptyValue=<<qualify "$:/temp/NewFieldValue">> >
-	<$action-deletetiddler $filter="[<newFieldNameTiddler>] [prefix[$:/temp/NewFieldValue]prefix<safeNewFieldValueTiddlerPrefix>] [<storeTitle>] [<searchListState>]"/>
-</$set>
-<$action-sendmessage $message="tm-focus-selector" $param=<<tf.current-tiddler-new-field-selector>>/>
-\end
+
+\procedure lingo-base() $:/language/EditTemplate/
 
 \procedure delete-state-tiddlers() <$action-deletetiddler $filter="[<newFieldNameTiddler>] [<storeTitle>] [<searchListState>]"/>
 
-\procedure cancel-search-actions-inner()
-\whitespace trim
-<$list
-	filter="[<storeTitle>has[text]] [<newFieldNameTiddler>has[text]]"
-	variable="ignore"
-	emptyMessage="<<cancel-delete-tiddler-actions 'cancel'>>">
-<<delete-state-tiddlers>>
-</$list>
+\procedure focus-new-field-input() <$action-sendmessage $message="tm-focus-selector" $param=`[data-tiddler-title="$(storyTiddler)$"] .tc-edit-field-add-name-wrapper input` />
+
+\procedure new-field-actions()
+	<$action-setfield $tiddler=<<storyTiddler>> $field={{{ [<newFieldNameTiddler>get[text]] }}} $value={{{ [<newFieldValueTiddler>get[text]] }}} />
+	<$action-deletetiddler $filter="[prefix[$:/temp/NewFieldValue]prefix<newFieldValueTiddlerPrefix>]"/>
+	<<delete-state-tiddlers>>
+	<<focus-new-field-input>>
+\end
+
+\procedure delete-field-actions()
+	<$action-deletefield $field=<<currentField>>/>
+	<<focus-new-field-input>>
 \end
 
 \procedure cancel-search-actions()
-\whitespace trim
-<$set name="userInput" value={{{ [<storeTitle>get[text]] }}}>
-<$list
-	filter="[<newFieldNameTiddler>get[text]!match<userInput>]"
-	emptyMessage="<<cancel-search-actions-inner>>">
-<$action-setfield $tiddler=<<newFieldNameTiddler>> text=<<userInput>>/><$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
-</$list>
-</$set>
+	<$let userInput={{{ [<storeTitle>get[text]] }}}>
+		<%if [<newFieldNameTiddler>get[text]!match<userInput>] %>
+			<$action-setfield $tiddler=<<newFieldNameTiddler>> text=<<userInput>>/>
+			<$action-setfield $tiddler=<<refreshTitle>> text="yes"/>
+		<%else%>
+			<%if [<storeTitle>has[text]] [<newFieldNameTiddler>has[text]] %>
+				<<delete-state-tiddlers>>	
+			<%else%>
+				<<cancel-delete-tiddler-actions 'cancel'>>
+			<%endif%>
+		<%endif%>
+	</$let>
 \end
 
 \procedure new-field()
-\whitespace trim
-<$vars name={{{ [<newFieldNameTiddler>get[text]] }}}>
-<$reveal type="nomatch" text="" default=<<name>>>
-<$button tooltip={{$:/language/EditTemplate/Fields/Add/Button/Hint}}>
-<$action-sendmessage $message="tm-add-field"
-$name=<<name>>
-$value={{{ [subfilter<get-field-value-tiddler-filter>get[text]] }}}/>
-<$set name="safeNewFieldValueTiddlerPrefix" value=<<newFieldValueTiddlerPrefix>> emptyValue=<<qualify "$:/temp/NewFieldValue">> >
-	<$action-deletetiddler $filter="[<newFieldNameTiddler>] [prefix[$:/temp/NewFieldValue]prefix<safeNewFieldValueTiddlerPrefix>] [<storeTitle>] [<searchListState>]"/>
-</$set>
-<<lingo Fields/Add/Button>>
-</$button>
-</$reveal>
-<$reveal type="match" text="" default=<<name>>>
-<$button>
-<<lingo Fields/Add/Button>>
-</$button>
-</$reveal>
-</$vars>
+	<%if [<newFieldNameTiddler>get[text]!is[blank]] %>
+		<$button actions="<<new-field-actions>>" tooltip={{$:/language/EditTemplate/Fields/Add/Button/Hint}}>
+			<<lingo Fields/Add/Button>>
+		</$button>	
+	<%else%>
+		<$button>	
+			<<lingo Fields/Add/Button>>
+		</$button>	
+	<%endif%>
 \end
-\whitespace trim
 
-<$set name="newFieldValueTiddlerPrefix" value=<<newFieldValueTiddlerPrefix>> emptyValue=<<qualify "$:/temp/NewFieldValue">> >
-<div class="tc-edit-fields">
-<table class={{{ [all[current]fields[]] :filter[lookup[$:/config/EditTemplateFields/Visibility/]!match[hide]] :and[count[]!match[0]] :and[then[tc-edit-fields]] :else[[tc-edit-fields tc-edit-fields-small]] }}}>
-<tbody>
-<$list filter="[all[current]fields[]] :and[sort[title]]" variable="currentField" storyview="pop">
-<$list filter=<<tf.config-filter>> variable="temp">
-<tr class="tc-edit-field">
-<td class="tc-edit-field-name">
-<$text text=<<currentField>>/>:</td>
-<td class="tc-edit-field-value">
-<$keyboard key="((delete-field))" actions="""<$action-deletefield $field=<<currentField>>/><$set name="currentTiddlerCSSescaped" value={{{ [<currentTiddler>escapecss[]] }}}><$action-sendmessage $message="tm-focus-selector" $param=<<tf.current-tiddler-new-field-selector>>/></$set>""">
-<$transclude tiddler={{{ [<currentField>] :cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]] :and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}] }}} />
-</$keyboard>
-</td>
-<td class="tc-edit-field-remove">
-<$button class="tc-btn-invisible" tooltip={{$:/language/EditTemplate/Field/Remove/Hint}} aria-label={{$:/language/EditTemplate/Field/Remove/Caption}}>
-<$action-deletefield $field=<<currentField>>/>
-{{$:/core/images/delete-button}}
-</$button>
-</td>
-</tr>
-</$list>
-</$list>
-</tbody>
-</table>
-</div>
+\function tf.config-filter() [lookup:show[$:/config/EditTemplateFields/Visibility/]!match[hide]]
 
-<$fieldmangler>
-<div class="tc-edit-field-add">
-<em class="tc-edit tc-small-gap-right">
-<<lingo Fields/Add/Prompt>>
-</em>
-<$vars refreshTitle=<<qualify "$:/temp/fieldname/refresh">> storeTitle=<<newFieldNameInputTiddler>> searchListState=<<newFieldNameSelectionTiddler>>>
-<div class="tc-edit-field-add-name-wrapper">
-<$transclude $variable="keyboard-driven-input" tiddler=<<newFieldNameTiddler>> storeTitle=<<storeTitle>> refreshTitle=<<refreshTitle>>
-		selectionStateTitle=<<searchListState>> tag="input" default="" placeholder={{$:/language/EditTemplate/Fields/Add/Name/Placeholder}}
-		focusPopup=<<qualify "$:/state/popup/field-dropdown">> class="tc-edit-texteditor tc-popup-handle" tabindex={{$:/config/EditTabIndex}}
-		focus={{{ [{$:/config/AutoFocus}match[fields]then[true]] :else[[false]] }}} cancelPopups="yes"
-		configTiddlerFilter="[[$:/config/EditMode/fieldname-filter]]" inputCancelActions=<<cancel-search-actions>> />
-<$button popup=<<qualify "$:/state/popup/field-dropdown">> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Field/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Field/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button>
-<$reveal state=<<qualify "$:/state/popup/field-dropdown">> type="nomatch" text="" default="">
-<div class="tc-block-dropdown tc-edit-type-dropdown">
-<$set name="tv-show-missing-links" value="yes">
-<$linkcatcher to=<<newFieldNameTiddler>>>
-<div class="tc-dropdown-item">
-<<lingo Fields/Add/Dropdown/User>>
-</div>
-<$set name="newFieldName" value={{{ [<storeTitle>get[text]] }}}>
-<$list filter="[!is[shadow]!is[system]fields[]search:title<newFieldName>sort[]] :except[[created]] :except[[creator]] :except[[draft.of]] :except[[draft.title]] :except[[modified]] :except[[modifier]] :except[[tags]] :except[[text]] :except[[title]] :except[[type]]"  variable="currentField">
-<$list filter="[<currentField>addsuffix[-primaryList]] :except[<searchListState>get[text]]" emptyMessage="""<$link to=<<currentField>> class="tc-list-item-selected"><$text text=<<currentField>>/></$link>""">
-<$link to=<<currentField>>>
-<$text text=<<currentField>>/>
-</$link>
-</$list>
-</$list>
-<div class="tc-dropdown-item">
-<<lingo Fields/Add/Dropdown/System>>
-</div>
-<$list filter="[fields[]search:title<newFieldName>sort[]] :except[!is[shadow]!is[system]fields[]]" variable="currentField">
-<$list filter="[<currentField>addsuffix[-secondaryList]] :except[<searchListState>get[text]]" emptyMessage="""<$link to=<<currentField>> class="tc-list-item-selected"><$text text=<<currentField>>/></$link>""">
-<$link to=<<currentField>>>
-<$text text=<<currentField>>/>
-</$link>
-</$list>
-</$list>
-</$set>
-</$linkcatcher>
-</$set>
-</div>
-</$reveal>
-</div>
-<$let currentTiddlerCSSescaped={{{ [<currentTiddler>escapecss[]] }}} currentTiddler={{{ [subfilter<get-field-value-tiddler-filter>] }}} currentField="text" currentFieldName={{{ [<newFieldNameTiddler>get[text]] }}}>
-<span class="tc-edit-field-add-value tc-small-gap-right">
-<$keyboard key="((add-field))" actions=<<new-field-actions>>>
-<$transclude tiddler={{{ [subfilter<get-field-editor-filter>] }}} />
-</$keyboard>
-</span>
-<span class="tc-edit-field-add-button">
-<$transclude $variable="new-field"/>
-</span>
-</$let>
-</$vars>
-</div>
-</$fieldmangler>
-</$set>
+\function tf.field-cascade()
+	[<currentField>]
+	:cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]]
+	:and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}]
+\end
+
+\function tf.get-field-editor()
+	[<newFieldNameTiddler>get[text]else[]]
+	:cascade[all[shadows+tiddlers]tag[$:/tags/FieldEditorFilter]!is[draft]get[text]]
+	:and[!is[blank]else{$:/core/ui/EditTemplate/fieldEditor/default}]
+\end
+
+\function tf.primary-list-exceptions() created creator draft.of draft.title modified modifier tags text title type
+
+\function tf.list-selection-class(listSuffix) [<searchListState>get[text]removesuffix<listSuffix>match<currentField>then[tc-list-item-selected]]
+
+
+<$let newFieldValueTiddlerPrefix={{{ [<newFieldValueTiddlerPrefix>!is[blank]else<qualify "$:/temp/NewFieldValue">] }}} >
+	<div class="tc-edit-fields">
+		<!-- table of user fields of the current tiddler -->
+		<table class=`tc-edit-fields ${ [all[current]fields[]] :filter[tf.config-filter[]] :and[count[]match[0]then[tc-edit-fields-small]] }$`>
+			<tbody>
+				<$list filter="[all[current]fields[]] :and[sort[title]]" variable="currentField" storyview="pop">
+					<%if [<currentField>tf.config-filter[]] %>
+						<tr class="tc-edit-field">
+							<td class="tc-edit-field-name">
+								<$text text=<<currentField>>/>:
+							</td>
+							<td class="tc-edit-field-value">
+								<$keyboard key="((delete-field))" actions="<<delete-field-actions>>">
+									<$transclude tiddler=<<tf.field-cascade>> />
+								</$keyboard>
+							</td>
+							<td class="tc-edit-field-remove">
+								<$button actions="<<delete-field-actions>>"
+									aria-label={{$:/language/EditTemplate/Field/Remove/Caption}}
+									class="tc-btn-invisible"
+									tooltip={{$:/language/EditTemplate/Field/Remove/Hint}}
+								>
+									{{$:/core/images/delete-button}}
+								</$button>
+							</td>
+						</tr>
+					<%endif%>
+				</$list>
+			</tbody>
+		</table>
+	</div>
+	
+	<!-- input control for new field name with selection dropdown -->
+	<div class="tc-edit-field-add">
+		<em class="tc-edit tc-small-gap-right">
+			<<lingo Fields/Add/Prompt>>
+		</em>
+		<$let refreshTitle=<<qualify "$:/temp/fieldname/refresh">>
+			storeTitle=<<newFieldNameInputTiddler>>
+			searchListState=<<newFieldNameSelectionTiddler>>
+		>
+			<div class="tc-edit-field-add-name-wrapper">
+				<$transclude $variable="keyboard-driven-input"
+					cancelPopups="yes"
+					class=`tc-edit-texteditor tc-popup-handle ${ [<newFieldNameTiddler>get[text]] :intersection[<storyTiddler>fields[]] :then[[tc-edit-field-exists]] }$`
+					configTiddlerFilter="[[$:/config/EditMode/fieldname-filter]]"
+					default=""
+					focus={{{ [{!!draft.of}is[tiddler]then{$:/config/AutoFocusEdit}match[fields]then[true]] :else[{$:/config/AutoFocus}match[fields]then[true]] :else[[false]] }}}
+					focusPopup=<<qualify "$:/state/popup/field-dropdown">>
+					inputAcceptVariantActions=<<save-tiddler-actions>>
+					inputCancelActions=<<cancel-search-actions>>
+					placeholder={{$:/language/EditTemplate/Fields/Add/Name/Placeholder}}
+					refreshTitle=<<refreshTitle>>
+					selectionStateTitle=<<searchListState>>
+					storeTitle=<<storeTitle>>
+					tag="input"
+					tabindex={{$:/config/EditTabIndex}}
+					tiddler=<<newFieldNameTiddler>>
+				/>
+				<$button aria-label={{$:/language/EditTemplate/Field/Dropdown/Caption}}
+					class="tc-btn-invisible tc-btn-dropdown tc-small-gap"
+					popup=<<qualify "$:/state/popup/field-dropdown">>
+					tooltip={{$:/language/EditTemplate/Field/Dropdown/Hint}}
+				>
+					{{$:/core/images/down-arrow}}
+				</$button>
+				<$reveal state=<<qualify "$:/state/popup/field-dropdown">> type="nomatch" text="" default="" tag="div" class="tc-block-dropdown tc-edit-type-dropdown">
+					<$let tv-show-missing-links="yes">
+						<$linkcatcher to=<<newFieldNameTiddler>>>
+							<div class="tc-dropdown-item">
+								<<lingo Fields/Add/Dropdown/User>>
+							</div>
+							<$let newFieldName={{{ [<storeTitle>get[text]] }}}
+								primaryListFields={{{ [!is[shadow]!is[system]fields[]format:titlelist[]join[ ]] }}}
+							>
+								<$list filter="[enlist<primaryListFields>search:title<newFieldName>sort[]] :except[tf.primary-list-exceptions[]]" variable="currentField">
+									<$link to=<<currentField>> class=<<tf.list-selection-class "-primaryList">> >
+										<$text text=<<currentField>>/>
+									</$link>
+								</$list>
+								<div class="tc-dropdown-item">
+									<<lingo Fields/Add/Dropdown/System>>
+								</div>
+								<$list filter="[fields[]search:title<newFieldName>!enlist<primaryListFields>sort[]]" variable="currentField">
+									<$link to=<<currentField>> class=<<tf.list-selection-class "-secondaryList">>>
+										<$text text=<<currentField>>/>
+									</$link>
+								</$list>
+							</$let>
+						</$linkcatcher>
+					</$let>
+				</$reveal>
+			</div>
+
+			<!-- input control for new field content -->
+			<$let currentFieldName={{{ [<newFieldNameTiddler>get[text]] }}}
+				fieldEditor=<<tf.get-field-editor>>
+				newFieldValueTiddler={{{ [<newFieldValueTiddlerPrefix>] [[/]] [<fieldEditor>sha256[16]] :and[join[]] }}}
+				currentTiddler=<<newFieldValueTiddler>>
+			>
+				<span class="tc-edit-field-add-value tc-small-gap-right">
+					<$keyboard key="((add-field))" actions="<<new-field-actions>>">
+						<$transclude $tiddler=<<fieldEditor>> />
+					</$keyboard>
+				</span>
+				<span class="tc-edit-field-add-button">
+					<$transclude $variable="new-field"/>
+				</span>
+			</$let>
+		</$let>
+	</div>
+</$let>

core/ui/EditTemplate/tags.tid

@@ -17,7 +17,7 @@ tags: $:/tags/EditTemplate
 	<$let backgroundColor=<<colour>> >
 		<span class="tc-tag-label tc-tag-list-item tc-small-gap-right"
 			data-tag-title=<<currentTiddler>>
-			style=`color:$(foregroundColor)$; background-color:$(backgroundColor)$;`
+			style=`color:$(foregroundColor)$; background-color:$(backgroundColor)$; --tp-remove-tag-button-color:$(foregroundColor)$`
 		>
 			<$transclude tiddler=<<icon>>/>
 			<$view field="title" format="text"/>
@@ -46,6 +46,7 @@ tags: $:/tags/EditTemplate
 	<$list filter="[<currentTiddler>get<tagField>enlist-input[]sort[title]]" storyview="pop">
 		<$macrocall $name="tag-body"
 			colour={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerColourFilter]!is[draft]get[text]] }}}
+			palette={{$:/palette}}
 			icon={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/TiddlerIconFilter]!is[draft]get[text]] }}}
 			tagField=<<tagField>>
 		/>

core/ui/EditTemplate/title.tid

@@ -2,7 +2,11 @@ title: $:/core/ui/EditTemplate/title
 tags: $:/tags/EditTemplate
 
 \whitespace trim
-<$edit-text field="draft.title" class="tc-titlebar tc-edit-texteditor" focus={{{ [{$:/config/AutoFocus}match[title]then[true]] ~[[false]] }}} tabindex={{$:/config/EditTabIndex}} cancelPopups="yes"/>
+<$edit-text field="draft.title" class="tc-titlebar tc-edit-texteditor"
+	focus={{{ [{!!draft.of}is[tiddler]then{$:/config/AutoFocusEdit}match[title]then[true]] ~[{$:/config/AutoFocus}match[title]then[true]] ~[[false]] }}}
+	tabindex={{$:/config/EditTabIndex}}
+	cancelPopups="yes"
+/>
 
 <$vars pattern="""[\|\[\]{}]""" bad-chars="""`| [ ] { }`""">
 

core/ui/EditTemplate/type.tid

@@ -4,13 +4,28 @@ first-search-filter: [all[shadows+tiddlers]prefix[$:/language/Docs/Types/]sort[d
 
 \procedure lingo-base() $:/language/EditTemplate/
 \procedure input-cancel-actions() <$list filter="[<storeTitle>get[text]] [<currentTiddler>get[type]] :and[limit[1]]" emptyMessage="""<<cancel-delete-tiddler-actions "cancel">>"""><$action-sendmessage $message="tm-remove-field" $param="type"/><$action-deletetiddler $filter="[<typeInputTiddler>] [<refreshTitle>] [<typeSelectionTiddler>]"/></$list>
+
 \whitespace trim
 <$set name="refreshTitle" value=<<qualify "$:/temp/type-search/refresh">>>
 <div class="tc-edit-type-selector-wrapper">
 <em class="tc-edit tc-small-gap-right"><<lingo Type/Prompt>></em>
 <div class="tc-type-selector-dropdown-wrapper">
-<div class="tc-type-selector"><$fieldmangler>
-<$transclude $variable="keyboard-driven-input" tiddler=<<currentTiddler>> storeTitle=<<typeInputTiddler>> refreshTitle=<<refreshTitle>> selectionStateTitle=<<typeSelectionTiddler>> field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}} focusPopup=<<qualify "$:/state/popup/type-dropdown">> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle tc-keep-focus" tabindex={{$:/config/EditTabIndex}} focus={{{ [{$:/config/AutoFocus}match[type]then[true]] :else[[false]] }}} cancelPopups="yes" configTiddlerFilter="[[$:/core/ui/EditTemplate/type]]" inputCancelActions=<<input-cancel-actions>>/><$button popup=<<qualify "$:/state/popup/type-dropdown">> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button><$button message="tm-remove-field" param="type" class="tc-btn-invisible tc-btn-icon" tooltip={{$:/language/EditTemplate/Type/Delete/Hint}} aria-label={{$:/language/EditTemplate/Type/Delete/Caption}}>{{$:/core/images/delete-button}}<$action-deletetiddler $filter="[<typeInputTiddler>] [<storeTitle>] [<refreshTitle>] [<selectionStateTitle>]"/></$button>
+<div class="tc-type-selector">
+<$fieldmangler>
+<$transclude $variable="keyboard-driven-input" tiddler=<<currentTiddler>> storeTitle=<<typeInputTiddler>> refreshTitle=<<refreshTitle>>
+	selectionStateTitle=<<typeSelectionTiddler>> field="type" tag="input" default="" placeholder={{$:/language/EditTemplate/Type/Placeholder}}
+	focusPopup=<<qualify "$:/state/popup/type-dropdown">> class="tc-edit-typeeditor tc-edit-texteditor tc-popup-handle tc-keep-focus"
+	tabindex={{$:/config/EditTabIndex}}
+	focus={{{ [{!!draft.of}is[tiddler]then{$:/config/AutoFocusEdit}match[type]then[true]] :else[{$:/config/AutoFocus}match[type]then[true]] :else[[false]] }}}
+	cancelPopups="yes" configTiddlerFilter="[[$:/core/ui/EditTemplate/type]]"
+	inputCancelActions=<<input-cancel-actions>>
+/>
+	<$button popup=<<qualify "$:/state/popup/type-dropdown">> class="tc-btn-invisible tc-btn-dropdown tc-small-gap" tooltip={{$:/language/EditTemplate/Type/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Type/Dropdown/Caption}}>
+		{{$:/core/images/down-arrow}}
+	</$button>
+	<$button message="tm-remove-field" param="type" class="tc-btn-invisible tc-btn-icon" tooltip={{$:/language/EditTemplate/Type/Delete/Hint}} aria-label={{$:/language/EditTemplate/Type/Delete/Caption}}>
+		{{$:/core/images/delete-button}}<$action-deletetiddler $filter="[<typeInputTiddler>] [<storeTitle>] [<refreshTitle>] [<selectionStateTitle>]"/>
+	</$button>
 </$fieldmangler></div>
 
 <div class="tc-block-dropdown-wrapper">

core/ui/Filters/StoryList.tid

@@ -1,5 +1,5 @@
 title: $:/core/Filters/StoryList
 tags: $:/tags/Filter
-filter: [list[$:/StoryList]] -$:/AdvancedSearch
+filter: [<tv-story-list>is[variable]then<tv-story-list>else[$:/StoryList]] =>storylist [list<storylist>] -$:/AdvancedSearch
 description: {{$:/language/Filters/StoryList}}
 

core/ui/PageStylesheet.tid

@@ -8,6 +8,8 @@ code-body: yes
 
 <$set name="languageTitle" value={{!!name}}>
 
+<$transclude $tiddler="$:/core/stylesheets/custom-properties" $mode="block"/>
+
 <$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
 <$transclude mode="block"/>
 </$list>

core/ui/PaletteEditor.tid

@@ -1,94 +0,0 @@
-title: $:/PaletteEditor
-
-\define lingo-base() $:/language/ControlPanel/Palette/Editor/
-\define describePaletteColour(colour)
-<$transclude tiddler="$:/language/Docs/PaletteColours/$colour$"><$text text="$colour$"/></$transclude>
-\end
-\define edit-colour-placeholder()
- edit $(colourName)$
-\end
-\define colour-tooltip(showhide) $showhide$ editor for $(newColourName)$ 
-
-\define resolve-colour(macrocall)
-\import $:/core/macros/utils
-\whitespace trim
-<$wikify name="name" text="""$macrocall$""">
-<<name>>
-</$wikify>
-\end
-
-\define delete-colour-index-actions() <$action-setfield $index=<<colourName>>/>
-\define palette-manager-colour-row-segment()
-\whitespace trim
-<$edit-text index=<<colourName>> tag="input" placeholder=<<edit-colour-placeholder>> default=""/>
-<br>
-<$edit-text index=<<colourName>> type="color" tag="input" class="tc-palette-manager-colour-input"/>
-<$list filter="[<currentTiddler>getindex<colourName>removeprefix[<<]removesuffix[>>]] [<currentTiddler>getindex<colourName>removeprefix[<$]removesuffix[/>]]" variable="ignore">
-<$set name="state" value={{{ [[$:/state/palettemanager/]addsuffix<currentTiddler>addsuffix[/]addsuffix<colourName>] }}}>
-<$wikify name="newColourName" text="""<$macrocall $name="resolve-colour" macrocall={{{ [<currentTiddler>getindex<colourName>] }}}/>""">
-<$reveal state=<<state>> type="nomatch" text="show">
-<$button tooltip=<<colour-tooltip show>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" set=<<state>> setTo="show">{{$:/core/images/down-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
-</$reveal>
-<$reveal state=<<state>> type="match" text="show">
-<$button tooltip=<<colour-tooltip hide>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" actions="""<$action-deletetiddler $tiddler=<<state>>/>""">{{$:/core/images/up-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
-</$reveal>
-<$reveal state=<<state>> type="match" text="show">
-<$set name="colourName" value=<<newColourName>>>
-<br>
-<<palette-manager-colour-row-segment>>
-<br><br>
-</$set>
-</$reveal>
-</$wikify>
-</$set>
-</$list>
-\end
-
-\define palette-manager-colour-row()
-\whitespace trim
-<tr>
-<td>
-<span style="float:right;">
-<$button tooltip={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} aria-label={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} class="tc-btn-invisible" actions=<<delete-colour-index-actions>>>
-{{$:/core/images/delete-button}}</$button>
-</span>
-''<$macrocall $name="describePaletteColour" colour=<<colourName>>/>''<br/>
-<$macrocall $name="colourName" $output="text/plain"/>
-</td>
-<td>
-<<palette-manager-colour-row-segment>>
-</td>
-</tr>
-\end
-
-\define palette-manager-table()
-\whitespace trim
-<table>
-<tbody>
-<$set name="colorList" filter="[{$:/state/palettemanager/showexternal}match[yes]]"
-   value="[all[shadows+tiddlers]tag[$:/tags/Palette]indexes[]]" emptyValue="[<currentTiddler>indexes[]]">
-<$list filter=<<colorList>> variable="colourName"> <<palette-manager-colour-row>> </$list>
-</$set>
-</tbody>
-</table>
-\end
-\whitespace trim
-<$set name="currentTiddler" value={{$:/palette}}>
-
-<<lingo Prompt>>&#32;<$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
-
-<$list filter="[all[current]is[shadow]is[tiddler]]" variable="listItem">
-<<lingo Prompt/Modified>>
-&#32;
-<$button message="tm-delete-tiddler" param={{$:/palette}}><<lingo Reset/Caption>></$button>
-</$list>
-
-<$list filter="[all[current]is[shadow]!is[tiddler]]" variable="listItem">
-<<lingo Clone/Prompt>>
-</$list>
-
-<$button message="tm-new-tiddler" param={{$:/palette}}><<lingo Clone/Caption>></$button>
-
-<$checkbox tiddler="$:/state/palettemanager/showexternal" field="text" checked="yes" unchecked="no"><span class="tc-small-gap-left"><<lingo Names/External/Show>></span></$checkbox>
-
-<<palette-manager-table>>

core/ui/PaletteManager.tid

@@ -1,43 +1,94 @@
 title: $:/PaletteManager
 
-\define lingo-base() $:/language/ControlPanel/Palette/
+\define lingo-base() $:/language/ControlPanel/Palette/Editor/
+\define describePaletteColour(colour)
+<$transclude tiddler="$:/language/Docs/PaletteColours/$colour$"><$text text="$colour$"/></$transclude>
+\end
+\define edit-colour-placeholder()
+ edit $(colourName)$
+\end
+\define colour-tooltip(showhide) $showhide$ editor for $(newColourName)$ 
 
-<!-- Used by the language string CustomSettings/Prompt -->
-\procedure palette-link()
-<$tiddler tiddler={{$:/palette}}>
-	<$link to={{!!title}}>
-		<$view field="name" format="text">
-			<$view field="title" format="text"/>
-		</$view>
-	</$link>
-</$tiddler>
-\end palette-link
-
-<$transclude $tiddler="$:/snippets/paletteswitcher" thumbnails="yes"/>
-
-{{$:/snippets/palettetests}}
-
-<$let
-	paletteSettings={{{ [[$:/temp/palette-consolidated]get[settings]] }}}
->
-	<%if [<paletteSettings>!match[]] %>
-		<div>
-			<<lingo CustomSettings/Prompt>>
-			<$transclude $tiddler=<<paletteSettings>> $mode="block"/>
-		</div>
-	<%endif%>
-</$let>
-
-<$reveal type="nomatch" state="$:/state/ShowPaletteEditor" text="yes">
-
-<$button set="$:/state/ShowPaletteEditor" setTo="yes"><<lingo ShowEditor/Caption>></$button>
+\define resolve-colour(macrocall)
+\import $:/core/macros/utils
+\whitespace trim
+<$wikify name="name" text="""$macrocall$""">
+<<name>>
+</$wikify>
+\end
 
+\define delete-colour-index-actions() <$action-setfield $index=<<colourName>>/>
+\define palette-manager-colour-row-segment()
+\whitespace trim
+<$edit-text index=<<colourName>> tag="input" placeholder=<<edit-colour-placeholder>> default=""/>
+<br>
+<$edit-text index=<<colourName>> type="color" tag="input" class="tc-palette-manager-colour-input"/>
+<$list filter="[<currentTiddler>getindex<colourName>removeprefix[<<]removesuffix[>>]] [<currentTiddler>getindex<colourName>removeprefix[<$]removesuffix[/>]]" variable="ignore">
+<$set name="state" value={{{ [[$:/state/palettemanager/]addsuffix<currentTiddler>addsuffix[/]addsuffix<colourName>] }}}>
+<$wikify name="newColourName" text="""<$macrocall $name="resolve-colour" macrocall={{{ [<currentTiddler>getindex<colourName>] }}}/>""">
+<$reveal state=<<state>> type="nomatch" text="show">
+<$button tooltip=<<colour-tooltip show>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" set=<<state>> setTo="show">{{$:/core/images/down-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
 </$reveal>
-
-<$reveal type="match" state="$:/state/ShowPaletteEditor" text="yes">
-
-<$button set="$:/state/ShowPaletteEditor" setTo="no"><<lingo HideEditor/Caption>></$button>
-{{$:/PaletteEditor}}
-
+<$reveal state=<<state>> type="match" text="show">
+<$button tooltip=<<colour-tooltip hide>> aria-label=<<colour-tooltip show>> class="tc-btn-invisible" actions="""<$action-deletetiddler $tiddler=<<state>>/>""">{{$:/core/images/up-arrow}}<$text text=<<newColourName>> class="tc-small-gap-left"/></$button><br>
 </$reveal>
+<$reveal state=<<state>> type="match" text="show">
+<$set name="colourName" value=<<newColourName>>>
+<br>
+<<palette-manager-colour-row-segment>>
+<br><br>
+</$set>
+</$reveal>
+</$wikify>
+</$set>
+</$list>
+\end
 
+\define palette-manager-colour-row()
+\whitespace trim
+<tr>
+<td>
+<span style="float:right;">
+<$button tooltip={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} aria-label={{$:/language/ControlPanel/Palette/Editor/Delete/Hint}} class="tc-btn-invisible" actions=<<delete-colour-index-actions>>>
+{{$:/core/images/delete-button}}</$button>
+</span>
+''<$macrocall $name="describePaletteColour" colour=<<colourName>>/>''<br/>
+<$macrocall $name="colourName" $output="text/plain"/>
+</td>
+<td>
+<<palette-manager-colour-row-segment>>
+</td>
+</tr>
+\end
+
+\define palette-manager-table()
+\whitespace trim
+<table>
+<tbody>
+<$set name="colorList" filter="[{$:/state/palettemanager/showexternal}match[yes]]"
+   value="[all[shadows+tiddlers]tag[$:/tags/Palette]indexes[]]" emptyValue="[<currentTiddler>indexes[]]">
+<$list filter=<<colorList>> variable="colourName"> <<palette-manager-colour-row>> </$list>
+</$set>
+</tbody>
+</table>
+\end
+\whitespace trim
+<$set name="currentTiddler" value={{$:/palette}}>
+
+<<lingo Prompt>>&#32;<$link to={{$:/palette}}><$macrocall $name="currentTiddler" $output="text/plain"/></$link>
+
+<$list filter="[all[current]is[shadow]is[tiddler]]" variable="listItem">
+<<lingo Prompt/Modified>>
+&#32;
+<$button message="tm-delete-tiddler" param={{$:/palette}}><<lingo Reset/Caption>></$button>
+</$list>
+
+<$list filter="[all[current]is[shadow]!is[tiddler]]" variable="listItem">
+<<lingo Clone/Prompt>>
+</$list>
+
+<$button message="tm-new-tiddler" param={{$:/palette}}><<lingo Clone/Caption>></$button>
+
+<$checkbox tiddler="$:/state/palettemanager/showexternal" field="text" checked="yes" unchecked="no"><span class="tc-small-gap-left"><<lingo Names/External/Show>></span></$checkbox>
+
+<<palette-manager-table>>

core/ui/Palettes/Preview/Alert.tid

@@ -1,19 +0,0 @@
-title: $:/core/ui/Palettes/Preview/Alert
-tags: $:/tags/Preview/Page
-
-\whitespace trim
-<div class="tc-palette-preview-thumbnail-alert" style.background-color=<<colour alert-background>>>
-	<div class="tc-palette-preview-thumbnail-alert-border" style.border-color=<<colour alert-border>>>
-		<div style.color=<<colour foreground>>>
-			<div class="tc-palette-preview-thumbnail-alert-subtitle" style.color=<<colour alert-muted-foreground>>>
-				Lorem Ipsum
-				<div class="tc-palette-preview-thumbnail-alert-highlight" style.color=<<colour alert-highlight>>>
-					(Count: 1)
-				</div>
-			</div>
-			<div class="tc-palette-preview-thumbnail-alert-body">
-				Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Elit Sed Do Eiusmod Tempor Incididunt.
-			</div>
-		</div>
-	</div>
-</div>

core/ui/Palettes/Preview/Helpers.tid

@@ -1,55 +0,0 @@
-title: $:/core/ui/Palettes/Preview/Helpers
-tags: $:/tags/Preview/Helpers
-
-\whitespace trim
-
-\procedure palette-preview-component-list(tag)
-<$list filter="[all[shadows+tiddlers]tag<tag>!has[draft.of]]" variable="componentTitle">
-	<$transclude $tiddler=<<componentTitle>> title=<<title>>/>
-</$list>
-\end palette-preview-component-list
-
-\procedure tab-set(tabTitles,colourPrefix:"")
-	<div class="tc-palette-preview-thumbnail-tab-set">
-		<div class="tc-palette-preview-thumbnail-tab-buttons">
-			<$list filter="[enlist<tabTitles>]" variable="tabTitle" counter="tabIndex">
-				<%if [<tabIndex>match[1]] %>
-					<span
-						class="tc-palette-preview-thumbnail-tab-button"
-						style.border-color={{{ [<colourPrefix>addsuffix[tab-border-selected]] :map[function[colour],<currentTiddler>] }}}
-						style.color={{{ [<colourPrefix>addsuffix[tab-foreground-selected]] :map[function[colour],<currentTiddler>] }}}
-						style.background-color={{{ [<colourPrefix>addsuffix[tab-background-selected]] :map[function[colour],<currentTiddler>] }}}
-					>
-						<$text text=<<tabTitle>>/>
-					</span>
-				<%else%>
-					<span
-						class="tc-palette-preview-thumbnail-tab-button"
-						style.border-color={{{ [<colourPrefix>addsuffix[tab-border]] :map[function[colour],<currentTiddler>] }}}
-						style.color={{{ [<colourPrefix>addsuffix[tab-foreground]] :map[function[colour],<currentTiddler>] }}}
-						style.background-color={{{ [<colourPrefix>addsuffix[tab-background]] :map[function[colour],<currentTiddler>] }}}
-					>
-						<$text text=<<tabTitle>>/>
-					</span>
-				<%endif%>
-			</$list>
-		</div>
-		<div
-			class="tc-palette-preview-thumbnail-tab-divider"
-			style.border-color={{{ [<colourPrefix>addsuffix[tab-divider]] :map[function[colour],<currentTiddler>] }}}
-		>
-		</div>
-	</div>
-\end tab-set
-
-\procedure link(text)
-<span class="tc-palette-preview-thumbnail-tiddler-link" style.color=<<colour primary>>>
-	<$text text=<<text>>/>
-</span>
-\end link
-
-\procedure sidebar-link(text)
-<span class="tc-palette-preview-thumbnail-tiddler-link" style.color=<<colour sidebar-tiddler-link-foreground>>>
-	<$text text=<<text>>/>
-</span>
-\end sidebar-link