Merge 7beef2e7540bafe6a2f46658d3cb86b97de639f0 into 961e74f73d230d0028efb586db07699120eac888

2025-04-07 03:06:56 +00:00 · 2025-03-22 19:40:09 +08:00 · 2025-03-22 19:40:09 +08:00 · 1a959939c0
commit 1a959939c0
parent 961e74f73d 7beef2e754
43 changed files with 1570 additions and 119 deletions
--- a/core/language/en-GB/Misc.multids
+++ b/core/language/en-GB/Misc.multids
@ -47,6 +47,7 @@ InternalJavaScriptError/Title: Internal JavaScript Error
 InternalJavaScriptError/Hint: Well, this is embarrassing. It is recommended that you restart TiddlyWiki by refreshing your browser
 LayoutSwitcher/Description: Open the layout switcher
 LazyLoadingWarning: <p>Trying to load external content from ''<$text text={{!!_canonical_uri}}/>''</p><p>If this message doesn't disappear, either the tiddler content type doesn't match the type of the external content, or you may be using a browser that doesn't support external content for wikis loaded as standalone files. See https://tiddlywiki.com/#ExternalText</p>
+Left: Left
 LoginToTiddlySpace: Login to TiddlySpace
 Manager/Controls/FilterByTag/None: (none)
 Manager/Controls/FilterByTag/Prompt: Filter by tag:
@ -73,6 +74,7 @@ PageTemplate/Description: the default ~TiddlyWiki layout
 PageTemplate/Name: Standard Layout
 PluginReloadWarning: Please save {{$:/core/ui/Buttons/save-wiki}} and reload {{$:/core/ui/Buttons/refresh}} to allow changes to ~JavaScript plugins to take effect
 RecentChanges/DateFormat: DDth MMM YYYY
+Right: Right
 Shortcuts/Input/AdvancedSearch/Hint: Open the ~AdvancedSearch panel from within the sidebar search field
 Shortcuts/Input/Accept/Hint: Accept the selected item
 Shortcuts/Input/AcceptVariant/Hint: Accept the selected item (variant)
--- a/core/language/en-GB/ThemeTweaks.multids
+++ b/core/language/en-GB/ThemeTweaks.multids
@ -1,11 +1,13 @@
 title: $:/language/ThemeTweaks/

 ThemeTweaks: Theme Tweaks
-ThemeTweaks/Hint: You can tweak certain aspects of the ''Vanilla'' theme.
+ThemeTweaks/Hint: You can tweak certain aspects of the ''<$text text={{{ [<get.current.theme>get[name]] :else[[current]] }}}/>'' theme.
 Options: Options
 Options/SidebarLayout: Sidebar layout
 Options/SidebarLayout/Fixed-Fluid: Fixed story, fluid sidebar
 Options/SidebarLayout/Fluid-Fixed: Fluid story, fixed sidebar
+Options/SidebarPosition: Sidebar position
+Options/SidebarResizer: Sidebar resizer
 Options/StickyTitles: Sticky titles
 Options/StickyTitles/Hint: Causes tiddler titles to "stick" to the top of the browser window
 Options/CodeWrapping: Wrap long lines in code blocks
@ -26,17 +28,34 @@ Metrics/FontSize: Font size
 Metrics/LineHeight: Line height
 Metrics/BodyFontSize: Font size for tiddler body
 Metrics/BodyLineHeight: Line height for tiddler body
+Metrics/PreviewSliderWidth: Preview slider width
+Metrics/PreviewSliderWidth/Hint: the width of the slider between editor and editor preview
+Metrics/SidebarPadding: Sidebar padding
+Metrics/SidebarPadding/Hint: the padding of the sidebar between sidebar and story river
+Metrics/SidebarResizer/Hint: the values for `storyleft`, `storyright`, `storywidth`, `storyminwidth`, `sidebarwidth` and `sidebarminwidth` need to be ''absolute'' CSS units, ''percentages'' or ''em'' units in order for the sidebar resizer to work
+Metrics/SliderOpacity: Slider opacity
+Metrics/SliderOpacity/Hint: the opacity of the sliders
+Metrics/SliderOpacityHover: Slider opacity hover
+Metrics/SliderOpacityHover/Hint: the opacity on hover of the sliders
 Metrics/StoryLeft: Story left position
 Metrics/StoryLeft/Hint: how far the left margin of the story river<br>(tiddler area) is from the left of the page
+Metrics/StoryMinWidth: Minimum Story width
+Metrics/StoryMinWidth/Hint: controls the minimum width of the tiddlers in the story river
+Metrics/StoryPaddingLeft: Story Padding Left
+Metrics/StoryPaddingLeft/Hint: the left padding of the story river
+Metrics/StoryPaddingRight: Story Padding Right
+Metrics/StoryPaddingRight/Hint: the right padding of the story river
 Metrics/StoryTop: Story top position
 Metrics/StoryTop/Hint: how far the top margin of the story river<br>is from the top of the page
 Metrics/StoryRight: Story right
 Metrics/StoryRight/Hint: how far the left margin of the sidebar <br>is from the left of the page
 Metrics/StoryWidth: Story width
 Metrics/StoryWidth/Hint: the overall width of the story river
-Metrics/TiddlerWidth: Tiddler width
-Metrics/TiddlerWidth/Hint: within the story river
 Metrics/SidebarBreakpoint: Sidebar breakpoint
 Metrics/SidebarBreakpoint/Hint: the minimum page width at which the story<br>river and sidebar will appear side by side
+Metrics/SidebarMinWidth: Minimum Sidebar width
+Metrics/SidebarMinWidth/Hint: the minimum width of the sidebar
 Metrics/SidebarWidth: Sidebar width
 Metrics/SidebarWidth/Hint: the width of the sidebar in fluid-fixed layout
+Metrics/TiddlerWidth: Tiddler width
+Metrics/TiddlerWidth/Hint: within the story river
--- a/core/modules/editor/engines/framed.js
+++ b/core/modules/editor/engines/framed.js
@ -103,6 +103,10 @@ function FramedEngine(options) {
 	this.iframeDoc.body.appendChild(this.domNode);
 }

+FramedEngine.prototype.assignDomNodeClasses = function() {
+	this.iframeNode.className = this.widget.getAttribute("class","");
+};
+
 /*
 Copy styles from the dummy text area to the textarea in the iframe
 */
--- a/core/modules/editor/engines/simple.js
+++ b/core/modules/editor/engines/simple.js
@ -65,6 +65,10 @@ function SimpleEngine(options) {
 	this.widget.domNodes.push(this.domNode);
 }

+SimpleEngine.prototype.assignDomNodeClasses = function() {
+	this.domNode.className = this.widget.getAttribute("class","");
+};
+
 /*
 Set the text of the engine if it doesn't currently have focus
 */
--- a/core/modules/editor/factory.js
+++ b/core/modules/editor/factory.js
@ -217,7 +217,7 @@ 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["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) {
+		if(changedAttributes.tiddler || changedAttributes.field || changedAttributes.index || changedAttributes["default"] || (changedAttributes["class"] && !this.engine.assignDomNodeClasses) || 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 (changedTiddlers[this.editRefreshTitle]) {
@ -226,6 +226,9 @@ function editTextWidgetFactory(toolbarEngine,nonToolbarEngine) {
 			var editInfo = this.getEditInfo();
 			this.updateEditor(editInfo.value,editInfo.type);
 		}
+		if(changedAttributes["class"] && this.engine.assignDomNodeClasses) {
+			this.engine.assignDomNodeClasses();
+		}
 		this.engine.fixHeight();
 		if(this.editShowToolbar) {
 			return this.refreshChildren(changedTiddlers);
--- a/core/modules/widgets/edit-bitmap.js
+++ b/core/modules/widgets/edit-bitmap.js
@ -51,10 +51,14 @@ EditBitmapWidget.prototype.render = function(parent,nextSibling) {
 	this.toolbarNode.className = "tc-editor-toolbar";
 	parent.insertBefore(this.toolbarNode,nextSibling);
 	this.domNodes.push(this.toolbarNode);
+	var classes = this.getAttribute("class","").split(" ");
+	if(classes.indexOf("tc-edit-bitmapeditor") === -1) {
+		classes.push("tc-edit-bitmapeditor");
+	}
 	// Create the on-screen canvas
 	this.canvasDomNode = $tw.utils.domMaker("canvas",{
 		document: this.document,
-		"class":"tc-edit-bitmapeditor",
+		"class": classes.join(" "),
 		eventListeners: [{
 			name: "touchstart", handlerObject: this, handlerMethod: "handleTouchStartEvent"
 		},{
@ -87,6 +91,14 @@ EditBitmapWidget.prototype.render = function(parent,nextSibling) {
 	]);
 };

+EditBitmapWidget.prototype.assignDomNodeClasses = function() {
+	var classes = this.getAttribute("class","").split(" ");
+	if(classes.indexOf("tc-edit-bitmapeditor") === -1) {
+		classes.push("tc-edit-bitmapeditor");
+	}
+	this.canvasDomNode.className = classes.join(" ");
+};
+
 /*
 Handle an edit bitmap operation message from the toolbar
 */
@ -112,6 +124,10 @@ EditBitmapWidget.prototype.execute = function() {
 Just refresh the toolbar
 */
 EditBitmapWidget.prototype.refresh = function(changedTiddlers) {
+	var changedAttributes = this.computeAttributes();
+	if(changedAttributes["class"]) {
+		this.assignDomNodeClasses();
+	}
 	return this.refreshChildren(changedTiddlers);
 };

--- a/core/ui/EditTemplate/body-editor.tid
+++ b/core/ui/EditTemplate/body-editor.tid
@ -4,38 +4,38 @@ title: $:/core/ui/EditTemplate/body/editor

 <$edit

-  field="text"
-  class="tc-edit-texteditor tc-edit-texteditor-body"
-  placeholder={{$:/language/EditTemplate/Body/Placeholder}}
-  tabindex={{$:/config/EditTabIndex}}
-  focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}}
-  cancelPopups="yes"
-  fileDrop={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}}
+	field="text"
+	class=<<get.tc-editor.class>>
+	placeholder={{$:/language/EditTemplate/Body/Placeholder}}
+	tabindex={{$:/config/EditTabIndex}}
+	focus={{{ [{$:/config/AutoFocus}match[text]then[true]] ~[[false]] }}}
+	cancelPopups="yes"
+	fileDrop={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}}

 ><$set

-  name="targetTiddler"
-  value=<<currentTiddler>>
+	name="targetTiddler"
+	value=<<currentTiddler>>

 ><$list

-  filter="[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]]"
+	filter="[all[shadows+tiddlers]tag[$:/tags/EditorToolbar]!has[draft.of]]"

 ><$reveal

-  type="nomatch"
-  state=<<config-visibility-title>>
-  text="hide"
-  class="tc-text-editor-toolbar-item-wrapper"
+	type="nomatch"
+	state=<<config-visibility-title>>
+	text="hide"
+	class="tc-text-editor-toolbar-item-wrapper"

 ><$transclude

-  tiddler="$:/core/ui/EditTemplate/body/toolbar/button"
-  mode="inline"
+	tiddler="$:/core/ui/EditTemplate/body/toolbar/button"
+	mode="inline"

 /></$reveal></$list><$list

-  filter="[all[shadows+tiddlers]tag[$:/tags/EditorTools]!has[draft.of]]"
+	filter="[all[shadows+tiddlers]tag[$:/tags/EditorTools]!has[draft.of]]"

 ><$list
 	filter={{!!condition}}
--- a/core/ui/EditTemplate/body/default.tid
+++ b/core/ui/EditTemplate/body/default.tid
@ -1,9 +1,28 @@
 title: $:/core/ui/EditTemplate/body/default

-\function edit-preview-state()
+\import $:/core/procedures/sliders
+
+\function get.edit-preview-state()
 [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualified-preview-state>] +[get[text]] :else[[no]]
 \end

+\function get.tc-editor.class()
+[{!!type}is[blank]then[tc-edit-texteditor tc-edit-texteditor-body]]
+[{!!type}is[blank]then<get.edit-preview-state>match[yes]then<identifier>addprefix[tc-edit-texteditor-identified-]]
+[{!!type}addprefix[$:/config/EditorTypeMappings/]get[text]!match[bitmap]then[tc-edit-texteditor tc-edit-texteditor-body]]
+[{!!type}addprefix[$:/config/EditorTypeMappings/]get[text]!match[bitmap]then<get.edit-preview-state>match[yes]then<identifier>addprefix[tc-edit-texteditor-identified-]]
+[{!!type}addprefix[$:/config/EditorTypeMappings/]get[text]match[bitmap]then[tc-edit-bitmapeditor tc-edit-bitmapeditor-body]]
+[{!!type}addprefix[$:/config/EditorTypeMappings/]get[text]match[bitmap]then<get.edit-preview-state>match[yes]then<identifier>addprefix[tc-edit-bitmapeditor-identified-]] +[join[ ]]
+\end
+
+\function get.tc-tiddler-preview-preview.class() tc-tiddler-preview-preview [<identifier>addprefix[tc-tiddler-preview-preview-identified-]] +[join[ ]]
+
+\function get.slider.condition() [<get.edit-preview-state>match[yes]] :else[[no]]
+
+\function resizer.state.tiddler() [[$:/state/resizing/editor-preview-]addsuffix<identifier>]
+
+\function resizer.class() [[tc-editor-preview-slider-]addsuffix<identifier>]
+
 \define config-visibility-title()
 $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 \end
@ -12,36 +31,55 @@ $:/config/EditorToolbarButtons/Visibility/$(currentTiddler)$
 <$action-popup $state=<<importState>> $coords="(0,0,0,0)" $floating="yes"/>
 \end

+\procedure tp-tiddler-editor-preview()
+<div
+	class={{{ [<get.edit-preview-state>match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [<get.edit-preview-state>match[yes]then[tc-tiddler-preview-identified-]addsuffix<identifier>] [[tc-tiddler-editor]] +[join[ ]] }}}>
+
+	<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
+
+	<$list filter="[<editPreviewStateTiddler>get[text]match[yes]]" variable="ignore">
+
+		<div class=<<get.tc-tiddler-preview-preview.class>> data-tiddler-title={{!!draft.title}} data-tags={{!!tags}}>
+
+			<$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
+
+				<$transclude tiddler="$:/core/ui/EditTemplate/body/preview/output" mode="inline"/>
+
+			</$transclude>
+
+		</div>
+
+	</$list>
+
+</div>
+\end
+
 \whitespace trim
 <$let
 	qualified-preview-state=<<qualify "$:/state/showeditpreview">>
 	editPreviewStateTiddler={{{ [{$:/config/ShowEditPreview/PerTiddler}!match[yes]then[$:/state/showeditpreview]] :else[<qualified-preview-state>] }}}
 	importTitle=<<qualify $:/ImportImage>>
-	importState=<<qualify $:/state/ImportImage>> >
-<$dropzone importTitle=<<importTitle>> autoOpenOnImport="no" contentTypesFilter={{$:/config/Editor/ImportContentTypesFilter}} class="tc-dropzone-editor" enable={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}} filesOnly="yes" actions=<<importFileActions>> >
-<div>
-<div class={{{ [<edit-preview-state>match[yes]then[tc-tiddler-preview]else[tc-tiddler-preview-hidden]] [[tc-tiddler-editor]] +[join[ ]] }}}>
-
-<$transclude tiddler="$:/core/ui/EditTemplate/body/editor" mode="inline"/>
-
-<$list filter="[<editPreviewStateTiddler>get[text]match[yes]]" variable="ignore">
-
-<div class="tc-tiddler-preview-preview" data-tiddler-title={{!!draft.title}} data-tags={{!!tags}}>
-
-<$transclude tiddler={{$:/state/editpreviewtype}} mode="inline">
-
-<$transclude tiddler="$:/core/ui/EditTemplate/body/preview/output" mode="inline"/>
-
-</$transclude>
-
-</div>
-
-</$list>
-
-</div>
-
-</div>
-
-</$dropzone>
-
+	importState=<<qualify $:/state/ImportImage>>
+	identifier={{{ [<qualify>addsuffix<currentTiddler>sha256[]] }}}
+	sidebarWidthTiddler={{{ [<identifier>addprefix[$:/state/resizer/previewwidth-]] }}}
+>
+	<$dropzone importTitle=<<importTitle>>
+		autoOpenOnImport="no"
+		contentTypesFilter={{$:/config/Editor/ImportContentTypesFilter}}
+		class="tc-dropzone-editor"
+		enable={{{ [{$:/config/DragAndDrop/Enable}match[no]] :else[subfilter{$:/config/Editor/EnableImportFilter}then[yes]else[no]] }}}
+		filesOnly="yes"
+		actions=<<importFileActions>>
+	>
+		<div>
+			<$transclude
+				$variable="editor-preview-slider"
+				class="tc-edit-texteditor-slider"
+				template="tp-tiddler-editor-preview"
+				mode="inline"
+				padding="0px"
+				sliderWidth=<<get.theme.metric previewsliderwidth>>
+			/>
+		</div>
+	</$dropzone>
 </$let>
--- a/core/ui/EditorToolbar/preview.tid
+++ b/core/ui/EditorToolbar/preview.tid
@ -10,7 +10,7 @@ shortcuts: ((preview))

 \whitespace trim
 <span>
-	<$transclude $tiddler={{{ [<edit-preview-state>match[yes]then[$:/core/images/preview-open]else[$:/core/images/preview-closed]] }}} />
+	<$transclude $tiddler={{{ [<get.edit-preview-state>match[yes]then[$:/core/images/preview-open]else[$:/core/images/preview-closed]] }}} />
 </span>
 <$action-setfield $tiddler=<<editPreviewStateTiddler>> $value={{{ [<editPreviewStateTiddler>get[text]toggle[yes],[no]] }}} />
 <$action-sendmessage $message="tm-edit-text-operation" $param="focus-editor"/>
--- a/core/ui/PageTemplate/sidebar-resizer.tid
+++ b/core/ui/PageTemplate/sidebar-resizer.tid
@ -0,0 +1,34 @@
+title: $:/core/ui/PageTemplate/sidebar-resizer
+tags: $:/tags/PageTemplate
+list-after: $:/core/ui/PageTemplate/story
+code-body: yes
+
+\import [function[get.base.functions.theme],<get.current.theme>first[]is[tiddler]] :else[function[get.base.functions.theme],<get.current.theme>first[]is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/functions]] [[$:/core/procedures/sidebar-resizer]]
+
+\function resizer.state.tiddler() $:/state/sidebar/resizing
+\function resizer.state() [{$:/state/sidebar}]
+\function resizer.class() tc-main-slider
+\function set.throttling() yes
+\function drag.direction.reverse() [<get.theme.option sidebarposition>match[left]then[yes]] :else[[no]]
+\function get.slider.condition() [{$:/state/sidebar}!match[no]then[yes]]
+\whitespace trim
+
+<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
+	<$let
+		tv-set-storywidth-storyright=<<set.storywidth.storyright>>
+		tv-set-sidebarwidth=<<set.sidebarwidth>>
+		tv-set-centralised=<<set.centralised>>
+
+		storyLeftTiddler=<<get.story-left.tiddler>>
+		storyRightTiddler=<<get.story-right.tiddler>>
+		sidebarWidthTiddler=<<get.sidebar-width.tiddler>>
+		tiddlerWidthTiddler=<<get.tiddler-width.tiddler>>
+		storyWidthTiddler=<<get.story-width.tiddler>>
+		storyMinWidthTiddler=<<get.story-minwidth.tiddler>>
+		sidebarMinWidthTiddler=<<get.sidebar-minwidth.tiddler>>
+		storyPaddingLeftTiddler=<<get.story-padding-left.tiddler>>
+		storyPaddingRightTiddler=<<get.story-padding-right.tiddler>>
+	>
+		<$transclude $variable="sidebar-resizer"/>
+	</$let>
+<% endif %>
--- a/core/ui/PageTemplateClassFilters.tid
+++ b/core/ui/PageTemplateClassFilters.tid
@ -0,0 +1,4 @@
+title: $:/core/ui/PageTemplateClassFilters
+tags: $:/tags/ClassFilters/PageTemplate
+
+[<get.theme.option sidebarposition>match[left]then[tc-sidebar-left]]
--- a/core/wiki/functions/themes.tid
+++ b/core/wiki/functions/themes.tid
@ -0,0 +1,115 @@
+title: $:/core/functions/themes
+tags: $:/tags/Global
+code-body: yes
+
+\function is.pixel.value(value) [<value>removesuffix[px]]
+\function is.percentage.value(value) [<value>removesuffix[%]]
+\function is.cm.value(value) [<value>removesuffix[cm]]
+\function is.mm.value(value) [<value>removesuffix[mm]]
+\function is.Q.value(value) [<value>removesuffix[Q]]
+\function is.in.value(value) [<value>removesuffix[in]]
+\function is.pc.value(value) [<value>removesuffix[pc]]
+\function is.pt.value(value) [<value>removesuffix[pt]]
+\function is.em.value(value) [<value>removesuffix[em]]
+
+\function convert.to.cm(value) [<value>divide[37.8]]
+\function convert.to.mm(value) [convert.to.cm<value>multiply[10]]
+\function convert.to.Q(value) [convert.to.cm<value>multiply[40]]
+\function convert.to.in(value) [<value>divide[96]]
+\function convert.to.pc(value) [convert.to.in<value>multiply[6]]
+\function convert.to.pt(value) [convert.to.in<value>multiply[72]]
+\function convert.to.em(value) [[storyTiddler]is[variable]then<value>divide{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}] [[storyTiddler]!is[variable]then<value>divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}]
+
+\function convert.to.pixels(value)
+[is.pixel.value<value>]
+:else[is.cm.value<value>multiply[37.8]]
+:else[is.mm.value<value>multiply[37.8]divide[10]]
+:else[is.Q.value<value>multiply[37.8]divide[40]]
+:else[is.in.value<value>multiply[96]]
+:else[is.pc.value<value>multiply[96]divide[6]]
+:else[is.pt.value<value>multiply[96]divide[72]]
+:else[is.em.value<value>then[storyTiddler]is[variable]then<value>multiply{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}]
+:else[is.em.value<value>then[storyTiddler]!is[variable]then<value>multiply{$:/themes/tiddlywiki/vanilla/metrics/fontsize}]
+\end
+
+\function convert.to.pixels.metric(value,metric) [<value>addsuffix<metric>] :map[convert.to.pixels<currentTiddler>]
+
+\function subtract.one.from.sidebarbreakpoint(value)
+[is.pixel.value<value>subtract[1]addsuffix[px]]
+:else[is.cm.value<value>convert.to.pixels.metric<value>,[cm]subtract[1]divide[37.8]addsuffix[cm]]
+:else[is.mm.value<value>convert.to.pixels.metric<value>,[mm]subtract[1]divide[37.8]multiply[10]addsuffix[mm]]
+:else[is.Q.value<value>convert.to.pixels.metric<value>,[Q]subtract[1]divide[37.8]multiply[40]addsuffix[Q]]
+:else[is.in.value<value>convert.to.pixels.metric<value>,[in]subtract[1]divide[96]addsuffix[in]]
+:else[is.pc.value<value>convert.to.pixels.metric<value>,[pc]subtract[1]divide[96]multiply[6]addsuffix[pc]]
+:else[is.pt.value<value>convert.to.pixels.metric<value>,[pt]subtract[1]divide[96]multiply[72]addsuffix[pt]]
+:else[is.em.value<value>convert.to.pixels.metric<value>,[em]subtract[1]divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}addsuffix[em]]
+\end
+
+\function sidebarbreakpoint() [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}]
+
+\function sidebarbreakpoint-minus-one() [subtract.one.from.sidebarbreakpoint<sidebarbreakpoint>] :else[<sidebarbreakpoint>]
+
+\function add.one.to.breakpoint(value)
+[is.pixel.value<value>add[1]addsuffix[px]]
+:else[is.cm.value<value>convert.to.pixels.metric<value>,[cm]add[1]divide[37.8]addsuffix[cm]]
+:else[is.mm.value<value>convert.to.pixels.metric<value>,[mm]add[1]divide[37.8]multiply[10]addsuffix[mm]]
+:else[is.Q.value<value>convert.to.pixels.metric<value>,[Q]add[1]divide[37.8]multiply[40]addsuffix[Q]]
+:else[is.in.value<value>convert.to.pixels.metric<value>,[in]add[1]divide[96]addsuffix[in]]
+:else[is.pc.value<value>convert.to.pixels.metric<value>,[pc]add[1]divide[96]multiply[6]addsuffix[pc]]
+:else[is.pt.value<value>convert.to.pixels.metric<value>,[pt]add[1]divide[96]multiply[72]addsuffix[pt]]
+:else[is.em.value<value>convert.to.pixels.metric<value>,[em]add[1]divide{$:/themes/tiddlywiki/vanilla/metrics/fontsize}addsuffix[em]]
+\end
+
+\function breakpoint-plus-one() [add.one.to.breakpoint{$:/config/plugins/menubar/breakpoint}] :else[{$:/config/plugins/menubar/breakpoint}]
+
+\function get.base.theme.metric.recursive(theme,metric) [<theme>get[dependents]enlist-input[]] :map[get.base.theme.metric<currentTiddler>,<metric>]
+
+\function get.base.theme.metric(theme,metric)
+[<theme>addsuffix[/metrics/]addsuffix<metric>is[tiddler]]
+:else[<theme>addsuffix[/metrics/]addsuffix<metric>is[shadow]]
+:else[get.base.theme.metric.recursive<theme>,<metric>]
+\end
+
+\function get.base.theme(theme,metric) [get.base.theme.metric<theme>,<metric>first[]removesuffix<metric>removesuffix[/metrics/]]
+
+\function get.theme.metric(metric) [get.base.theme.metric<get.current.theme>,<metric>first[]get[text]]
+
+\function get.base.theme.option.recursive(theme,option) [<theme>get[dependents]enlist-input[]] :map[get.base.theme.option<currentTiddler>,<option>]
+
+\function get.base.theme.option(theme,option)
+[<theme>addsuffix[/options/]addsuffix<option>is[tiddler]]
+:else[<theme>addsuffix[/options/]addsuffix<option>is[shadow]]
+:else[get.base.theme.option.recursive<theme>,<option>]
+\end
+
+\function get.theme.option(option) [get.base.theme.option<get.current.theme>,<option>first[]get[text]]
+
+\function get.theme.explicit.option(option) [<get.current.theme>addsuffix[/options/]addsuffix<option>get[text]]
+
+\function get.theme(metric)
+[get.base.theme<get.current.theme>,<metric>addsuffix[/metrics/]addsuffix<metric>is[tiddler]]
+:else[get.base.theme<get.current.theme>,<metric>addsuffix[/metrics/]addsuffix<metric>is[shadow]]
+:else[[$:/themes/tiddlywiki/vanilla/metrics/]addsuffix<metric>]
+\end
+
+\function set.theme.metric(metric)
+[get.base.theme.metric<get.current.theme>,<metric>first[]is[shadow]]
+:else[get.base.theme.metric<get.current.theme>,<metric>first[]!is[shadow]is[tiddler]]
+:else[[$:/themes/tiddlywiki/vanilla/metrics/]addsuffix<metric>]
+\end
+
+\function get.base.functions.theme.recursive(theme) [<theme>get[dependents]enlist-input[]] :map[get.base.functions.theme<currentTiddler>]
+
+\function get.base.functions.theme(theme)
+[<theme>addsufix[/functions]is[tiddler]]
+:else[<theme>addsuffix[/functions]is[shadow]]
+:else[get.base.functions.theme.recursive<theme>]
+\end
+
+\function get.current.theme() [{$:/theme}!is[blank]] :else[all[tiddlers+shadows]plugin-type[theme]plugin-priority[0]first[]]
+
+\function get.theme.storywidthoverlap() [[max((]addsuffix<get.theme.metric storyright>addsuffix[ - ]addsuffix<get.theme.metric storywidth>addsuffix[ - ]addsuffix<get.theme.metric storyleft>addsuffix[),(-1 * (]addsuffix<get.theme.metric storyright>addsuffix[ - ]addsuffix<get.theme.metric storywidth>addsuffix[ - ]addsuffix<get.theme.metric storyleft>addsuffix[)))]]
+
+\function get.theme.storyleftpadding.excess() [[calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ - ]addsuffix<get.story-sidebar.overlap>addsuffix[)]]
+
+\function get.theme.storyrightpadding.excess() [[calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ - ]addsuffix<get.story-sidebar.overlap>addsuffix[)]]
--- a/core/wiki/macros/sidebar-resizer.tid
+++ b/core/wiki/macros/sidebar-resizer.tid
@ -0,0 +1,551 @@
+title: $:/core/procedures/sidebar-resizer
+
+\function convert.to.percentage(value) [<value>divide<widgetNodeWidth>multiply[100]]
+
+\function convert.to.percentage.value() [convert.to.percentage<value>]
+\function convert.to.cm.value() [convert.to.cm<value>]
+\function convert.to.mm.value() [convert.to.mm<value>]
+\function convert.to.Q.value() [convert.to.Q<value>]
+\function convert.to.in.value() [convert.to.in<value>]
+\function convert.to.pc.value() [convert.to.pc<value>]
+\function convert.to.pt.value() [convert.to.pt<value>]
+\function convert.to.em.value() [convert.to.em<value>]
+
+\function convert.to.pixels.locally(value) [is.percentage.value<value>multiply<widgetNodeWidth>divide[100]] :else[convert.to.pixels<value>]
+
+\function convert.to.result(value,suffix)
+[<suffix>match[px]then<value>]
+:else[<suffix>match[%]then<convert.to.percentage.value>]
+:else[<suffix>match[cm]then<convert.to.cm.value>]
+:else[<suffix>match[mm]then<convert.to.mm.value>]
+:else[<suffix>match[Q]then<convert.to.Q.value>]
+:else[<suffix>match[in]then<convert.to.in.value>]
+:else[<suffix>match[pc]then<convert.to.pc.value>]
+:else[<suffix>match[pt]then<convert.to.pt.value>]
+:else[<suffix>match[em]then<convert.to.em.value>]
+\end
+
+\function get.value.metric(value)
+[<value>suffix[px]then[px]]
+:else[<value>suffix[%]then[%]]
+:else[<value>suffix[cm]then[cm]]
+:else[<value>suffix[mm]then[mm]]
+:else[<value>suffix[Q]then[Q]]
+:else[<value>suffix[in]then[in]]
+:else[<value>suffix[pc]then[pc]]
+:else[<value>suffix[pt]then[pt]]
+:else[<value>suffix[em]then[em]]
+\end
+
+\function get.sidebar.width.tiddler()
+[<sidebarWidthTiddler>!is[blank]]
+:else[get.theme[sidebarwidth]]
+\end
+
+\function get.resizer.state()
+[<resizer.state.tiddler>!is[blank]]
+:else[<qualify>addsuffix<get.sidebar.width.tiddler>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizing-]]
+\end
+
+\procedure set-theme-throttling(metric,tiddler)
+<%if [<set.throttling>match[yes]] %>
+	<$set name="metricsTiddler" value={{{ [<tiddler>getvariable[]!is[blank]] :else[function[get.theme],<metric>] }}}>
+		<%if [<metricsTiddler>!has[throttle.refresh]] %>
+			<$action-setfield $tiddler=<<metricsTiddler>> throttle.refresh="yes"/>
+		<% endif %>
+	</$set>
+<% endif %>
+\end
+
+\procedure sidebar-resizer-pointerdown-actions-inner()
+<%if [<get.resizer.state>is[missing]then<event-mousebutton>match[left]] %>
+	<$let
+		startStoryLeft={{{ [<storyLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyLeftTiddler>!is[blank]is[missing]then[0%]] :else[get.theme.metric[storyleft]] }}}
+		startStoryRight={{{ [<storyRightTiddler>!is[blank]is[tiddler]get[text]] :else[<storyRightTiddler>!is[blank]is[missing]then[50%]] :else[get.theme.metric[storyright]] }}}
+		startSidebarWidth={{{ [<sidebarWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarWidthTiddler>!is[blank]is[missing]then[50%]] :else[get.theme.metric[sidebarwidth]] }}}
+		startTiddlerWidth={{{ [<tiddlerWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<tiddlerWidthTiddler>!is[blank]is[missing]then[50%]] :else[get.theme.metric[tiddlerwidth]] }}}
+		startStoryWidth={{{ [<storyWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyWidthTiddler>!is[blank]is[missing]then[50%]] :else[get.theme.metric[storywidth]] }}}>
+		<$action-setfield $tiddler=<<get.resizer.state>>
+			text="yes"
+			widget-node-width=<<tv-widgetnode-width>>
+			start-posx=<<event-fromcatcher-posx>>
+			start-story-left=<<startStoryLeft>>
+			story-left-metric={{{ [get.value.metric<startStoryLeft>] }}}
+			start-story-right=<<startStoryRight>>
+			story-right-metric={{{ [get.value.metric<startStoryRight>] }}}
+			start-sidebar-width=<<startSidebarWidth>>
+			sidebar-width-metric={{{ [get.value.metric<startSidebarWidth>] }}}
+			start-tiddler-width=<<startTiddlerWidth>>
+			tiddler-width-metric={{{ [get.value.metric<startTiddlerWidth>] }}}
+			start-story-width=<<startStoryWidth>>
+			story-width-metric={{{ [get.value.metric<startStoryWidth>] }}}
+		/>
+	</$let>
+<% endif %>
+\end
+
+\procedure sidebar-resizer-pointerdown-actions()
+<%if [[$:/state/sidebar]get[click-time]subtract<now [UTC]YYYY0MM0DD0hh0mm0ss0XXX>abs[]compare:number:lteq[500]] %>
+	<<sidebar-resizer-pointercancel-actions>>
+	<$action-setfield $tiddler="$:/state/sidebar" text="no"/>
+<% else %>
+	<%if [[$:/state/sidebar]is[missing]] %>
+		<$action-setfield $tiddler="$:/state/sidebar" text="yes"/>
+	<% endif %>
+	<$action-setfield $tiddler="$:/state/sidebar" click-time=<<now [UTC]YYYY0MM0DD0hh0mm0ss0XXX>>/>
+	<<sidebar-resizer-pointerdown-actions-inner>>
+<% endif %>
+\end
+
+\procedure sidebar-resizer-pointercancel-actions()
+<$action-deletetiddler $tiddler=<<get.resizer.state>>/>
+\end
+
+\procedure set-storywidth-storyright-actions-inner-actions()
+<$let
+	storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}}
+	storyWidthConverted={{{ [function[convert.to.result],<storyWidth>,<storyWidthMetric>] }}}
+	storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}}
+	storyWidthMaxConverted={{{ [function[convert.to.result],<storyWidthMax>,<storyWidthMetric>] }}}
+	tiddlerWidthConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidth>multiply[100]divide<innerStoryWidth>] :else[function[convert.to.result],<tiddlerWidth>,<tiddlerWidthMetric>] }}}
+	tiddlerMinWidthConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerMinWidth>multiply[100]divide<innerStoryWidthMin>] :else[function[convert.to.result],<tiddlerMinWidth>,<tiddlerWidthMetric>] }}}
+	tiddlerWidthMaxConverted={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthMax>multiply[100]divide<innerStoryWidthMax>] :else[function[convert.to.result],<tiddlerWidthMax>,<tiddlerWidthMetric>] }}}
+	storyWidthSetTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<set.theme.metric storywidth>] }}}
+	tiddlerWidthSetTiddler={{{ [<tiddlerWidthTiddler>!is[blank]] :else[<set.theme.metric tiddlerwidth>] }}}>
+
+	<%if [<tiddlerWidth>!is[blank]] %>
+		<%if [<tiddlerWidth>compare:number:lt<tiddlerMinWidth>] %>
+			<%if [<tiddlerWidthMetric>match[%]] %>
+				<$set name="tiddlerMinWidthConverted" value={{{ [<tiddlerMinWidth>multiply[100]divide<innerStoryWidth>] }}}>
+					<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] }}}/>
+				</$set>
+			<% else %>
+				<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] }}}/>
+			<% endif %>
+		<% else %>
+			<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerWidthConverted>addsuffix<tiddlerWidthMetric>] }}}/>
+		<% endif %>
+	<%elseif [<storyWidthCompare>compare:number:lteq<storyMinWidth>] %>
+		<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerMinWidthConverted>addsuffix<tiddlerWidthMetric>] }}}/>
+	<%elseif [<storyWidthCompare>compare:number:gteq<storyWidthMax>] %>
+		<$action-setfield $tiddler=<<tiddlerWidthSetTiddler>> text={{{ [<tiddlerWidthMaxConverted>addsuffix<tiddlerWidthMetric>] }}}/>
+	<% endif %>
+
+	<%if [<storyWidth>!is[blank]] %>
+		<$action-setfield $tiddler=<<storyWidthSetTiddler>> text={{{ [<storyWidthConverted>addsuffix<storyWidthMetric>] }}}/>
+	<%elseif [<storyWidthCompare>compare:number:lt<storyMinWidth>] %>
+		<$action-setfield $tiddler=<<storyWidthSetTiddler>> text={{{ [<storyMinWidthConverted>addsuffix<storyWidthMetric>] }}}/>
+	<%elseif [<storyWidthCompare>compare:number:gt<storyWidthMax>] %>
+		<$action-setfield $tiddler=<<storyWidthSetTiddler>> text={{{ [<storyWidthMaxConverted>addsuffix<storyWidthMetric>] }}}/>
+	<% endif %>
+
+</$let>
+
+<$let
+	storyRightMetric={{{ [<get.resizer.state>get[story-right-metric]] }}}
+	storyRightConverted={{{ [function[convert.to.result],<storyRight>,<storyRightMetric>] }}}
+	storyRightMaxConverted={{{ [function[convert.to.result],<storyRightMax>,<storyRightMetric>] }}}
+	storyRightMinConverted={{{ [function[convert.to.result],<storyRightMin>,<storyRightMetric>] }}}
+	storyRightSetTiddler={{{ [<storyRightTiddler>!is[blank]] :else[<set.theme.metric storyright>] }}}>
+
+	<%if [<storyRight>!is[blank]] %>
+		<$action-setfield $tiddler=<<storyRightSetTiddler>> text={{{ [<storyRightConverted>addsuffix<storyRightMetric>] }}}/>
+	<%elseif [<storyRightCompare>compare:number:lt<storyRightMin>] %>
+		<$action-setfield $tiddler=<<storyRightSetTiddler>> text={{{ [<storyRightMinConverted>addsuffix<storyRightMetric>] }}}/>
+	<%elseif [<storyRightCompare>compare:number:gt<storyRightMax>] %>
+		<$action-setfield $tiddler=<<storyRightSetTiddler>> text={{{ [<storyRightMaxConverted>addsuffix<storyRightMetric>] }}}/>
+	<% endif %>
+</$let>
+\end
+
+\procedure set-storywidth-storyright-actions-inner()
+<$let
+	storyWidthStart={{{ [<storyWidthStart>subtract<clampedDiff>] }}}
+	storyWidth={{{ [<intermediateStoryWidth>subtract<clampedDiff>] }}}
+	storyRight={{{ [<intermediateStoryRight>subtract<clampedDiff>] }}}
+	storyRightCompare={{{ [<intermediateStoryRight>subtract<clampedDiff>] }}}
+	storyWidthCompare={{{ [<storyWidth>] }}}
+	innerStoryWidth={{{ [<intermediateInnerStoryWidth>subtract<clampedDiff>] }}}
+	innerStoryWidthStart={{{ [<intermediateInnerStoryWidthStart>subtract<clampedDiff>] }}}
+	innerStoryWidthMin={{{ [<intermediateInnerStoryWidthMin>subtract<clampedDiff>] }}}
+	storyRightMax={{{ [<intermediateStoryRightMax>] }}}
+	tiddlerWidthStartPixels={{{ [<tiddlerWidthMetric>match[%]then<tiddlerWidthStart>multiply<innerStoryWidthStart>divide[100]] :else[convert.to.pixels.locally<tiddlerWidthStart>] }}}
+	tiddlerWidthStoryWidthDiff={{{ [<storyWidthStart>subtract<tiddlerWidthStartPixels>] }}}
+	tiddlerMinWidth={{{ [<storyMinWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>compare:number:lteq<tiddlerWidthStartPixels>] :else[<tiddlerWidthStartPixels>] }}}
+	tiddlerWidthMax={{{ [<storyWidthMax>subtract<tiddlerWidthStoryWidthDiff>] }}}
+	tiddlerWidth={{{ [<tiddlerWidthStartPixels>add<dragDiff>] }}}
+	tiddlerWidth={{{ [<storyWidth>compare:number:gt<storyMinWidth>compare:number:lt<storyWidthMax>then<tiddlerWidth>] :else[[]] }}}
+	storyRight={{{ [<storyRight>compare:number:lt<storyRightMax>compare:number:gt<storyRightMin>] :else[[]] }}}
+	storyWidth={{{ [<storyWidth>compare:number:lt<storyWidthMax>compare:number:gt<storyMinWidth>] :else[[]] }}}
+>
+	<<set-storywidth-storyright-actions-inner-actions>>
+</$let>
+\end
+
+\procedure set-storywidth-storyright-actions()
+<$let
+	storyRightStart={{{ [<get.resizer.state>get[start-story-right]] }}}
+	storyWidthStart={{{ [<get.resizer.state>get[start-story-width]] }}}
+	storyRightStart={{{ [convert.to.pixels.locally<storyRightStart>] }}}
+	storyWidthStart={{{ [convert.to.pixels.locally<storyWidthStart>] }}}
+	storyPaddingLeftValue={{{ [<storyPaddingLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingLeftTiddler>!is[blank]is[missing]then[0px]] :else[<get.theme.metric storypaddingleft>] }}}
+	storyPaddingLeft={{{ [convert.to.pixels.locally<storyPaddingLeftValue>] }}}
+	storyPaddingRightValue={{{ [<storyPaddingRightTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingRightTiddler>!is[blank]is[missing]then[0px]] :else[<get.theme.metric storypaddingright>] }}}
+	storyPaddingRight={{{ [convert.to.pixels.locally<storyPaddingRightValue>] }}}
+	storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}}
+	storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>] }}}
+	sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[<get.theme.metric sidebarminwidth>] }}}
+	storyLeftValue={{{ [<storyLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyLeftTiddler>!is[blank]is[missing]then<get.story.left>] :else[<get.theme.metric storyleft>] }}}
+	storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}}
+	sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
+	storySidebarOffset={{{ [convert.to.pixels.locally<get.story-sidebar.overlap>] :else[[0]] }}}
+	storyPaddingLeftExcess={{{ [<storyPaddingLeft>subtract<storySidebarOffset>] }}}
+	storyPaddingRightExcess={{{ [<storyPaddingRight>subtract<storySidebarOffset>] }}}
+	sidebarMinWidthWithoutOffset={{{ [<sidebarMinWidth>subtract<storySidebarOffset>] }}}
+	tiddlerWidthMetric={{{ [<get.resizer.state>get[tiddler-width-metric]] }}}
+	tiddlerWidthStart={{{ [<get.resizer.state>get[start-tiddler-width]] }}}
+	storyMinWidth={{{ [<storyMinWidth>add<storyPaddingLeftExcess>add<storyPaddingRightExcess>compare:number:gteq[0]] :else[[0]] }}}
+
+	storyWidthOverlap={{{ [<storyWidthStart>add<storyLeft>subtract<storyRightStart>] }}}
+	storyRightOverlap={{{ [<storyRightStart>subtract<storyLeft>subtract<storyWidthStart>] }}}
+
+	storyWidthStart={{{ [<storyWidthStart>compare:number:gteq<storyMinWidth>] :else[<storyMinWidth>] }}}
+
+	intermediateStoryWidth={{{ [<storyWidthStart>add<dragDiff>] }}}
+	intermediateStoryRight={{{ [<storyRightStart>add<dragDiff>] }}}
+
+	intermediateInnerStoryWidth={{{ [<intermediateStoryWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
+	intermediateInnerStoryWidthStart={{{ [<storyWidthStart>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
+
+	intermediateStoryRightMax={{{ [<widgetNodeWidth>subtract<sidebarMinWidthWithoutOffset>] }}}
+	intermediateStoryRightMin={{{ [<storyMinWidth>add<storyleft>] }}}
+
+	intermediateStoryWidthMax={{{ [<widgetNodeWidth>subtract<sidebarMinWidthWithoutOffset>subtract<storyLeft>] }}}
+
+	intermediateInnerStoryWidthMin={{{ [<storyMinWidth>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
+	intermediateInnerStoryWidthMax={{{ [<intermediateStoryWidthMax>subtract<storyPaddingLeft>subtract<storyPaddingRight>] }}}
+>
+
+	<%if [<storyWidthOverlap>compare:number:gteq[0]] %>
+		<$let
+			clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidthWithoutOffset>subtract<storyWidthOverlap>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
+			innerStoryWidthMax={{{ [<intermediateInnerStoryWidthMax>add<storyWidthOverlap>] }}}
+			storyRightMin={{{ [<intermediateStoryRightMin>subtract<storyWidthOverlap>add<storyLeft>] }}}
+			storyWidthMax={{{ [<intermediateStoryWidthMax>add<storyWidthOverlap>] }}}
+		>
+			<<set-storywidth-storyright-actions-inner>>
+		</$let>
+	<% else %>
+		<$let
+			clampedDiff={{{ [<storyWidthStart>add<storyLeft>add<sidebarMinWidthWithoutOffset>subtract<storyRightOverlap>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
+			innerStoryWidthMax={{{ [<intermediateInnerStoryWidthMax>add<storyRightOverlap>] }}}
+			storyRightMin={{{ [<intermediateStoryRightMin>subtract<storyRightOverlap>add<storyLeft>] }}}
+			storyWidthMax={{{ [<intermediateStoryWidthMax>add<storyRightOverlap>] }}}
+		>
+			<<set-storywidth-storyright-actions-inner>>
+		</$let>
+	<% endif %>
+
+</$let>
+\end
+
+\function get.sidebar-width.result()
+[<sidebarWidth>compare:number:gt<sidebarMaxWidth>then<sidebarMaxWidthConverted>addsuffix<sidebarWidthMetric>]
+:else[<sidebarWidth>compare:number:lt<sidebarMinWidth>then<sidebarMinWidthConverted>addsuffix<sidebarWidthMetric>]
+:else[<sidebarWidthConverted>addsuffix<sidebarWidthMetric>]
+\end
+
+\procedure set-sidebarwidth-actions()
+<$let
+	startSidebarWidth={{{ [<get.resizer.state>get[start-sidebar-width]] }}}
+	startSidebarWidth={{{ [convert.to.pixels.locally<startSidebarWidth>] }}}
+	sidebarWidth={{{ [<startSidebarWidth>subtract<dragDiff>] }}}
+	storyPaddingLeftValue={{{ [<storyPaddingLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingLeftTiddler>!is[blank]is[missing]then<get.story-padding.left>] :else[<get.theme.metric storypaddingleft>] }}}
+	storyPaddingLeft={{{ [convert.to.pixels.locally<storyPaddingLeftValue>] }}}
+	storyPaddingRightValue={{{ [<storyPaddingRightTiddler>!is[blank]is[tiddler]get[text]] :else[<storyPaddingRightTiddler>!is[blank]is[missing]then<get.story-padding.right>] :else[<get.theme.metric storypaddingright>] }}}
+	storyPaddingRight={{{ [convert.to.pixels.locally<storyPaddingRightValue>] }}}
+	sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[<get.theme.metric sidebarminwidth>] }}}
+	sidebarWidthMetric={{{ [<get.resizer.state>get[sidebar-width-metric]] }}}
+	sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
+	storyLeftValue={{{ [<storyLeftTiddler>!is[blank]is[tiddler]get[text]] :else[<storyLeftTiddler>!is[blank]is[missing]then<get.story.left>] :else[<get.theme.metric storyleft>] }}}
+	storyLeft={{{ [convert.to.pixels.locally<storyLeftValue>] }}}
+	storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<storyMinWidthTiddler>!is[blank]is[missing]then<get.left.minwidth>] :else[<get.theme.metric storyminwidth>] }}}
+	storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>compare:number:gteq[0]] :else[[0]] }}}
+	storySidebarOffset={{{ [convert.to.pixels.locally<get.story-sidebar.overlap>] :else[[0]] }}}
+	storyPaddingLeftExcess={{{ [<storyPaddingLeft>subtract<storySidebarOffset>] }}}
+	storyPaddingRightExcess={{{ [<storyPaddingRight>subtract<storySidebarOffset>] }}}
+	sidebarMaxWidth={{{ [<widgetNodeWidth>subtract<storyLeft>subtract<storyMinWidth>add<storySidebarOffset>subtract<storyPaddingLeftExcess>subtract<storyPaddingRightExcess>] }}}
+	clampedDiff={{{ [<storyLeft>add<storyMinWidth>add<startSidebarWidth>subtract<storySidebarOffset>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
+	sidebarWidth={{{ [<sidebarWidth>subtract<clampedDiff>] }}}
+	sidebarWidth={{{ [<sidebarWidth>compare:number:gteq<sidebarMinWidth>] :else[<sidebarMinWidth>] }}}
+	sidebarMaxWidth={{{ [<sidebarMaxWidth>compare:number:gteq<sidebarMinWidth>] :else[<sidebarMinWidth>] }}}
+>
+
+	<$let
+		sidebarWidthConverted={{{ [function[convert.to.result],<sidebarWidth>,<sidebarWidthMetric>] }}}
+		sidebarMaxWidthConverted={{{ [function[convert.to.result],<sidebarMaxWidth>,<sidebarWidthMetric>] }}}
+		sidebarMinWidthConverted={{{ [function[convert.to.result],<sidebarMinWidth>,<sidebarWidthMetric>] }}}
+		sidebarWidthSetTiddler={{{ [<sidebarWidthTiddler>!is[blank]] :else[<set.theme.metric sidebarwidth>] }}}>
+
+		<$action-setfield $tiddler=<<sidebarWidthSetTiddler>> text=<<get.sidebar-width.result>>/>
+
+	</$let>
+</$let>
+\end
+
+\function get.story-width.centralised.result()
+[<storyWidth>compare:number:lt<storyMinWidth>then<storyMinWidthConverted>addsuffix<storyWidthMetric>]
+:else[<storyWidth>compare:number:gteq<storyWidthMax>then<storyWidthMaxConverted>addsuffix<storyWidthMetric>]
+:else[<storyWidthConverted>addsuffix<storyWidthMetric>]
+\end
+
+\procedure set-centralised-actions()
+<$let
+	storyMinWidthValue={{{ [<storyMinWidthTiddler>!is[blank]get[text]] :else[{$:/themes/tiddlywiki/centralised/metrics/storyminwidth}] }}}
+	storyMinWidth={{{ [convert.to.pixels.locally<storyMinWidthValue>compare:number:gteq[0]] :else[[0]] }}}
+	storyWidthStart={{{ [<get.resizer.state>get[start-story-width]] }}}
+	storyWidthStart={{{ [convert.to.pixels.locally<storyWidthStart>] }}}
+	sidebarMinWidthValue={{{ [<sidebarMinWidthTiddler>!is[blank]is[tiddler]get[text]] :else[<sidebarMinWidthTiddler>!is[blank]is[missing]then<get.right.minwidth>] :else[{$:/themes/tiddlywiki/centralised/metrics/sidebarminwidth}] }}}
+	sidebarMinWidth={{{ [convert.to.pixels.locally<sidebarMinWidthValue>] }}}
+	storyWidthMax={{{ [<widgetNodeWidth>subtract<sidebarMinWidth>subtract<sidebarMinWidth>] }}}
+	dragDiffMultiplied={{{ [<dragDiff>multiply[2]] }}}
+	storyWidthClamped={{{ [<storyWidthStart>add<sidebarMinWidth>add<sidebarMinWidth>subtract<widgetNodeWidth>compare:number:gt[0]] :else[[0]] }}}
+	storyWidth={{{ [<storyWidthStart>add<dragDiffMultiplied>] }}}
+	storyWidth={{{ [<storyWidth>subtract<storyWidthClamped>] }}}>
+
+	<$let
+		storyWidthMetric={{{ [<get.resizer.state>get[story-width-metric]] }}}
+		storyWidthConverted={{{ [function[convert.to.result],<storyWidth>,<storyWidthMetric>] }}}
+		storyMinWidthConverted={{{ [function[convert.to.result],<storyMinWidth>,<storyWidthMetric>] }}}
+		storyWidthMaxConverted={{{ [function[convert.to.result],<storyWidthMax>,<storyWidthMetric>] }}}
+		storyWidthSetTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<set.theme.metric storywidth>] }}}>
+
+		<$action-setfield $tiddler=<<storyWidthSetTiddler>> text=<<get.story-width.centralised.result>>/>
+
+	</$let>
+
+</$let>
+\end
+
+\function get.drag.diff()
+[<event-fromcatcher-posx>subtract<startPosX>]
+:map[<drag.direction.reverse>match[yes]then<currentTiddler>multiply[-1]else<currentTiddler>]
+\end
+
+\procedure sidebar-resizer-pointermove-actions()
+<%if [<get.resizer.state>is[tiddler]] %>
+	<$let
+		startPosX={{{ [<get.resizer.state>get[start-posx]] }}}
+		widgetNodeWidth={{{ [<get.resizer.state>get[widget-node-width]] }}}
+		dragDiff=<<get.drag.diff>>>
+		<%if [<tv-set-storywidth-storyright>match[yes]] %>
+			<<set-theme-throttling storyright storyRightTiddler>>
+			<<set-theme-throttling tiddlerwidth tiddlerWidthTiddler>>
+			<<set-theme-throttling storywidth storyWidthTiddler>>
+			<<set-storywidth-storyright-actions>>
+		<% endif %>
+		<%if [<tv-set-sidebarwidth>match[yes]] %>
+			<<set-theme-throttling sidebarwidth sidebarWidthTiddler>>
+			<<set-sidebarwidth-actions>>
+		<% endif %>
+		<%if [<tv-set-centralised>match[yes]] %>
+			<<set-theme-throttling storywidth storyWidthTiddler>>
+			<<set-centralised-actions>>
+		<% endif %>
+	</$let>
+<% endif %>
+\end
+
+\function get.resizer.class() tc-slider [<get.resizer.state>is[tiddler]then[tc-resizer-active]] [<resizer.class>] [<resizer.class>is[blank]then<qualify>addsuffix<currentTiddler>sha256[]addprefix[tc-slider-identified-]] +[join[ ]]
+
+\function get.active.class(class) [<class>] [<resizer.class>match[tc-main-slider]] [<eventCatcherClass>] [<get.resizer.state>is[tiddler]then[tc-resizer-active]] +[join[ ]]
+
+\function get.sidebar-resizer.pointerdown.actions()
+[<get.resizer.state>match[$:/state/sidebar/resizing]then<sidebar-resizer-pointerdown-actions>]
+:else[<sidebar-resizer-pointerdown-actions-inner>]
+\end
+
+\function get.sidebar-resizer.pointercancel.actions() [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>]
+
+\function get.template-right.style.left() [<sliderCondition>match[no]then[0px]] :else[[calc(2 * ]addsuffix<get.resizer.style.width>addsuffix[)]]
+
+\function get.template-left.style.flex-basis() [<sliderCondition>match[no]then[100%]] :else[[calc(]addsuffix<get.resizer.style.left>addsuffix[ - ]addsuffix<resizerWidthDivided>addsuffix[px)]]
+
+\function get.template-right.style.flex-basis() [<sliderCondition>match[no]then[0%]] :else[[calc(]addsuffix<get.template-right.width>addsuffix[ - ]addsuffix<resizerWidthDivided>addsuffix[px)]]
+
+\procedure sidebar-resizer(templateLeft:"",templateRight:"",mode:"block",eventCatcherClass:"",zIndexLeft:"")
+
+<$set name="resizerWidthDivided" value={{{ [<get.resizer.style.width>divide[2]] }}}>
+
+	<$eventcatcher
+		tag="div"
+		class=<<get.active.class tc-slider-pointerdown-eventcatcher>>
+		selector=".tc-slider"
+		matchSelector=".tc-slider"
+		$pointerdown=<<get.sidebar-resizer.pointerdown.actions>>
+		$pointerup=<<sidebar-resizer-pointercancel-actions>>>
+
+		<%if [<resizer.state>!match[no]] %>
+
+			<$eventcatcher
+				tag="div"
+				class=<<get.active.class tc-slider-pointermove-eventcatcher-wrapper>>
+				selector=".tc-slider"
+				matchSelector=".tc-slider"
+				$pointerup={{{ [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>] }}}>
+
+				<$eventcatcher
+					tag="div"
+					selector=".tc-slider-pointermove"
+					matchSelector=".tc-slider-pointermove"
+					class=<<get.active.class tc-slider-pointermove-eventcatcher>>
+					$pointerup=<<sidebar-resizer-pointercancel-actions>>
+					$pointerleave=<<sidebar-resizer-pointercancel-actions>>
+					$pointerout=<<sidebar-resizer-pointercancel-actions>>
+					$pointercancel=<<sidebar-resizer-pointercancel-actions>>
+					$pointerdown=<<sidebar-resizer-pointercancel-actions>>
+					$touchstart=<<sidebar-resizer-pointercancel-actions>>
+					$pointermove=<<sidebar-resizer-pointermove-actions>>
+					$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
+
+					<div class=<<get.active.class tc-slider-pointermove>>/>
+
+				</$eventcatcher>
+
+				<%if [<templateLeft>is[variable]] [<templateLeft>is[tiddler]] %>
+
+					<div
+						style.display="flex"
+						style.position="relative"
+						style.flex-direction="column"
+						style.top="0"
+						style.left="0"
+						style.flex-basis=<<get.template-left.style.flex-basis>>
+						style.width=<<get.template-left.style.flex-basis>>
+						style.z-index=<<zIndexLeft>>
+					>
+
+						<%if [<templateLeft>is[variable]] %>
+
+							<$transclude $variable=<<templateLeft>> mode=<<mode>>/>
+
+						<% else %>
+
+							<$transclude $tiddler=<<templateLeft>> mode=<<mode>>/>
+
+						<% endif %>
+
+					</div>
+
+				<% endif %>
+
+				<%if [<get.slider.condition>match[yes]] %>
+
+					<div
+						class=<<get.resizer.class>>
+						style.position=<<get.resizer.style.position>>
+						style.left=<<get.resizer.style.left>>
+						style.width=<<get.resizer.style.width>>
+					/>
+
+				<% endif %>
+
+				<%if [<templateRight>is[variable]then<sliderCondition>!match[no]] [<templateRight>is[tiddler]then<sliderCondition>!match[no]] %>
+
+					<div
+						style.display="flex"
+						style.position="relative"
+						style.flex-direction="column"
+						style.top="0"
+						style.left=<<get.template-right.style.left>>
+						style.flex-basis=<<get.template-right.style.flex-basis>>
+						style.width=<<get.template-right.style.flex-basis>>
+					>
+
+						<%if [<templateRight>is[variable]] %>
+
+							<$transclude $variable=<<templateRight>> mode=<<mode>>/>
+
+						<% else %>
+
+							<$transclude $tiddler=<<templateRight>> mode=<<mode>>/>
+
+						<% endif %>
+
+					</div>
+
+				<% endif %>
+
+			</$eventcatcher>
+
+		<% endif %>
+
+	</$eventcatcher>
+
+</$set>
+
+\end
+
+\procedure editor-resizer(template:"",mode:"block",sliderCondition:"yes",eventCatcherClass:"")
+
+<$eventcatcher
+	tag="div"
+	class=<<get.active.class tc-slider-pointerdown-eventcatcher>>
+	selector=".tc-slider"
+	matchSelector=".tc-slider"
+	$pointerdown=<<sidebar-resizer-pointerdown-actions-inner>>
+	$pointerup=<<sidebar-resizer-pointercancel-actions>>>
+
+	<%if [<resizer.state>!match[no]] %>
+
+		<$eventcatcher
+			tag="div"
+			class=<<get.active.class tc-slider-pointermove-eventcatcher-wrapper>>
+			selector=".tc-slider"
+			matchSelector=".tc-slider"
+			$pointerup={{{ [<get.resizer.state>is[tiddler]then<sidebar-resizer-pointercancel-actions>] }}}>
+
+			<$eventcatcher
+				tag="div"
+				selector=".tc-slider-pointermove"
+				matchSelector=".tc-slider-pointermove"
+				class=<<get.active.class tc-slider-pointermove-eventcatcher>>
+				$pointerup=<<sidebar-resizer-pointercancel-actions>>
+				$pointerleave=<<sidebar-resizer-pointercancel-actions>>
+				$pointerout=<<sidebar-resizer-pointercancel-actions>>
+				$pointercancel=<<sidebar-resizer-pointercancel-actions>>
+				$pointerdown=<<sidebar-resizer-pointercancel-actions>>
+				$touchstart=<<sidebar-resizer-pointercancel-actions>>
+				$pointermove=<<sidebar-resizer-pointermove-actions>>
+				$contextmenu=<<sidebar-resizer-pointercancel-actions>>>
+
+				<div class=<<get.active.class tc-slider-pointermove>>/>
+
+			</$eventcatcher>
+
+			<%if [<get.slider.condition>match[yes]] %>
+
+				<div
+					class=<<get.resizer.class>>
+				/>
+
+			<% endif %>
+
+		</$eventcatcher>
+
+		<%if [<template>is[variable]] %>
+
+			<$transclude $variable=<<template>> mode=<<mode>>/>
+
+		<% else %>
+
+			<$transclude $tiddler=<<template>> mode=<<mode>>/>
+
+		<% endif %>
+
+	<% endif %>
+
+</$eventcatcher>
+
+\end
+
--- a/core/wiki/macros/sliders.tid
+++ b/core/wiki/macros/sliders.tid
@ -0,0 +1,98 @@
+title: $:/core/procedures/sliders
+code-body: yes
+
+\procedure editor-preview-slider(class:"",width:"100%",
+minHeight:"10px",template:"",
+mode:"block",sliderWidth:"12px",
+padding:"12px",
+leftMinWidth:"0%",rightMinWidth:"0%")
+
+\import $:/core/procedures/sidebar-resizer
+\function set.throttling() yes
+\function get.left.minwidth() [<leftMinWidth>]
+\function get.right.minwidth() [<rightMinWidth>]
+\function get.story-padding.right() 0px
+\function get.story-padding.left() 0px
+\function get.story.left() 0
+\function drag.direction.reverse() no
+\whitespace trim
+
+<$let
+	tv-set-storywidth-storyright="no"
+	tv-set-sidebarwidth="yes"
+	tv-set-centralised="no"
+	storyLeftTiddler={{{ [<storyLeftTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyleft-]] }}}
+	storyRightTiddler={{{ [<storyRightTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyright-]] }}}
+	sidebarWidthTiddler={{{ [<sidebarWidthTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/rightwidth-]] }}}
+	tiddlerWidthTiddler={{{ [<tiddlerWidthTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/tiddlerwidth-]] }}}
+	storyWidthTiddler={{{ [<storyWidthTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]] }}}
+	storyMinWidthTiddler={{{ [<storyMinWidthTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]] }}}
+	sidebarMinWidthTiddler={{{ [<sidebarMinWidthTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyminwidth-]] }}}
+	storyPaddingLeftTiddler={{{ [<storyPaddingLeftTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingleft-]] }}}
+	storyPaddingRightTiddler={{{ [<storyPaddingRightTiddler>!is[blank]] :else[<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingright-]] }}}>
+
+	<$transclude
+		$variable="editor-resizer"
+		template=<<template>>
+		eventCatcherClass="tc-editor-preview-eventcatcher"
+		mode=<<mode>>
+	/>
+
+</$let>
+\end
+
+\procedure two-cell-slider(
+templateLeft:"",templateRight:"",
+width:"100%",minHeight:"22px",
+mode:"block",sliderWidth:"12px",
+padding:"12px",leftMinWidth:"100px",
+rightMinWidth:"100px",id:"1")
+
+\import $:/core/procedures/sidebar-resizer
+\function get.resizer.style.position() absolute
+\function get.template-right.width() [<sidebarWidthTiddler>get[text]] :else[[50%]]
+\function get.resizer.style.left() [[clamp(]addsuffix<leftMinWidth>addsuffix[,]addsuffix[calc(100% - ]addsuffix<get.template-right.width>addsuffix[),calc(100% - ]addsuffix<rightMinWidth>addsuffix[))]]
+\function get.resizer.style.width() [<sliderWidth>]
+\function set.throttling() no
+\function get.modulo.minwidth(width) [<id>remainder[3]match[1]then<width>multiply[2]else<width>multiply[1]] :map[get.value.metric<width>addprefix<currentTiddler>]
+\function get.left.minwidth() [get.modulo.minwidth<leftMinWidth>]
+\function get.right.minwidth() [get.modulo.minwidth<rightMinWidth>]
+\function drag.direction.reverse() no
+\whitespace trim
+
+<div
+	style.width=<<width>>
+	style.min-height=<<minHeight>>
+	style.display="flex"
+	style.flex-direction="column"
+	style.padding-left=<<padding>>
+	style.padding-right=<<padding>>
+	style.padding-top=<<padding>>
+	style.padding-bottom=<<padding>>
+>
+
+	<$let
+		tv-set-storywidth-storyright="no"
+		tv-set-sidebarwidth="yes"
+		tv-set-centralised="no"
+		storyLeftTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyleft-]addsuffix<id>] }}}
+		storyRightTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyright-]addsuffix<id>] }}}
+		sidebarWidthTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/rightwidth-]addsuffix<id>] }}}
+		tiddlerWidthTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/tiddlerwidth-]addsuffix<id>] }}}
+		storyWidthTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]addsuffix<id>] }}}
+		storyMinWidthTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storywidth-]addsuffix<id>] }}}
+		sidebarMinWidthTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storyminwidth-]addsuffix<id>] }}}
+		storyPaddingLeftTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingleft-]addsuffix<id>] }}}
+		storyPaddingRightTiddler={{{ [<qualify>addsuffix<currentTiddler>sha256[]addprefix[$:/state/resizer/storypaddingright-]addsuffix<id>] }}}>
+		
+		<$transclude
+			$variable="sidebar-resizer"
+			templateLeft=<<templateLeft>>
+			templateRight=<<templateRight>>
+			mode=<<mode>>
+		/>
+	
+	</$let>
+
+</div>
+\end
--- a/core/wiki/themeswitcher.tid
+++ b/core/wiki/themeswitcher.tid
@ -4,7 +4,7 @@ title: $:/snippets/themeswitcher
 <$linkcatcher to="$:/theme">
 <div class="tc-chooser">
 <$list filter="[plugin-type[theme]sort[title]]">
-<$set name="cls" filter="[all[current]field:title{$:/theme}] [[$:/theme]!has[text]addsuffix[s/tiddlywiki/vanilla]field:title<currentTiddler>] +[limit[1]]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
+<$set name="cls" filter="[all[current]field:title{$:/theme}] [<get.current.theme>field:title<currentTiddler>] +[limit[1]]" value="tc-chooser-item tc-chosen" emptyValue="tc-chooser-item">
 <div class=<<cls>>><$link to={{!!title}}>
 ''<$view field="name" format="text"/>''
 &#32;
--- a/editions/tw5.com/tiddlywiki.info
+++ b/editions/tw5.com/tiddlywiki.info
@ -18,7 +18,8 @@
 		"tiddlywiki/tight",
 		"tiddlywiki/heavier",
 		"tiddlywiki/tight-heavier",
-		"tiddlywiki/readonly"
+		"tiddlywiki/readonly",
+		"tiddlywiki/example"
 	],
 	"languages": [
 	],
--- a/plugins/tiddlywiki/menubar/styles.tid
+++ b/plugins/tiddlywiki/menubar/styles.tid
@ -1,14 +1,6 @@
 title: $:/plugins/tiddlywiki/menubar/styles
 tags: [[$:/tags/Stylesheet]]

-\define breakpoint-plus-one()
-<$text text={{{ [{$:/config/plugins/menubar/breakpoint}removesuffix[px]add[1]addsuffix[px]] ~[{$:/config/plugins/menubar/breakpoint}] }}} />
-\end
-
-\define sidebarbreakpoint-minus-one()
-<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}} />
-\end
-
 \define set-sidebar-scrollable-top-if-hamburger()
 <$list filter="[all[tiddlers+shadows]tag[$:/tags/MenuBar]] -[all[tiddlers+shadows]prefix[$:/config/plugins/menubar/MenuItems/Visibility/]regexp:text[hide]removeprefix[$:/config/plugins/menubar/MenuItems/Visibility/]] -[all[tiddlers+shadows]tag[$:/tags/TopLeftBar]limit[1]then[]else[$:/plugins/tiddlywiki/menubar/items/topleftbar]] -[all[tiddlers+shadows]tag[$:/tags/TopRightBar]limit[1]then[$:/plugins/tiddlywiki/menubar/items/toprightbar]] -$:/plugins/tiddlywiki/menubar/items/hamburger +[limit[1]]">

--- a/themes/tiddlywiki/centralised/functions.tid
+++ b/themes/tiddlywiki/centralised/functions.tid
@ -0,0 +1,10 @@
+title: $:/themes/tiddlywiki/centralised/functions
+
+\function set.centralised() yes
+\function set.storywidth.storyright() no
+\function set.sidebarwidth() no
+
+\function get.story-sidebar.overlap() 42px
+
+\function sidebar.resizer.maxwidth() 21px
+\function sidebar.resizer.width() [<get.theme.option sidebarposition>!match[left]then[min(calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] :else[[min(calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]]
--- a/themes/tiddlywiki/centralised/metrics.multids
+++ b/themes/tiddlywiki/centralised/metrics.multids
@ -0,0 +1,7 @@
+title: $:/themes/tiddlywiki/centralised/metrics/
+
+sidebarminwidth: 350px
+storyminwidth: 350px
+storypaddingleft: 42px
+storypaddingright: 42px
+storywidth: 770px
--- a/themes/tiddlywiki/centralised/options.multids
+++ b/themes/tiddlywiki/centralised/options.multids
@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/centralised/options/
+
+sidebarresizer: show
--- a/themes/tiddlywiki/centralised/styles.tid
+++ b/themes/tiddlywiki/centralised/styles.tid
@ -9,18 +9,52 @@ tags: [[$:/tags/Stylesheet]]
 		text-align: center;
 	}

-	html .tc-story-river {
+	html .tc-story-river, html .tc-sidebar-left .tc-story-river {
 		position: relative;
-		width: 770px;
-		padding: 42px;
+		width: min(<<get.theme.metric storywidth>>,calc(100% - (2 * <<get.theme.metric sidebarminwidth>>)));
+		padding: 42px <<get.theme.metric storypaddingright>> 42px <<get.theme.metric storypaddingleft>>;
 		margin: 0 auto;
 		text-align: left;
+		display: block;
+		left: auto;
+		right: auto;
+	}
+
+	html body.tc-body .tc-sidebar-left .tc-story-river {
+		margin: 0 auto;
+		padding-right: <<get.theme.metric storypaddingright>>;
+		padding-left: <<get.theme.metric storypaddingleft>>;
 	}

 	html .tc-sidebar-scrollable {
 		text-align: left;
 		left: 50%;
 		right: 0;
-		margin-left: 343px;
+		margin-left: min(calc((100% - (2 * <<get.theme.metric sidebarminwidth>>)) / 2 - <<get.theme.metric storypaddingright>>),calc(<<get.theme.metric storywidth>> / 2 - <<get.theme.metric storypaddingright>>));
+		width: auto;
 	}
+
+	body.tc-body .tc-sidebar-left .tc-sidebar-scrollable {
+		margin-left: 0;
+		right: 50%;
+		left: 0;
+		z-index: 1;
+		margin-right: min(calc((100% - (2 * <<get.theme.metric sidebarminwidth>>)) / 2 - <<get.theme.metric storypaddingleft>>),calc(<<get.theme.metric storywidth>> / 2 - <<get.theme.metric storypaddingleft>>));
+		padding-right: 0px;
+		padding-left: 42px;
+	}
+
+	html[dir="rtl"] body.tc-body .tc-sidebar-left .tc-sidebar-scrollable {
+		padding-right: 42px;
+		padding-left: 0;
+	}
+
+	html[dir="rtl"] .tc-story-river, html[dir="rtl"] .tc-sidebar-scrollable {
+		text-align: right;
+	}
+
+	html .tc-tiddler-frame, html .tc-sidebar-left .tc-tiddler-frame {
+		width: 100%;
+	}
+
 }
--- a/themes/tiddlywiki/example/base.tid
+++ b/themes/tiddlywiki/example/base.tid
@ -0,0 +1,4 @@
+title: $:/themes/tiddlywiki/example/base
+tags: [[$:/tags/Stylesheet]]
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
--- a/themes/tiddlywiki/example/functions.tid
+++ b/themes/tiddlywiki/example/functions.tid
@ -0,0 +1,10 @@
+title: $:/themes/tiddlywiki/example/functions
+
+\function set.centralised() yes
+\function set.storywidth.storyright() no
+\function set.sidebarwidth() no
+
+\function get.story-sidebar.overlap() 0px
+
+\function sidebar.resizer.maxwidth() 12px
+\function sidebar.resizer.width() [<sidebar.resizer.maxwidth>]
--- a/themes/tiddlywiki/example/metrics.multids
+++ b/themes/tiddlywiki/example/metrics.multids
@ -0,0 +1,4 @@
+title: $:/themes/tiddlywiki/example/metrics/
+
+storypaddingleft: 0px
+storypaddingright: 0px
--- a/themes/tiddlywiki/example/options.multids
+++ b/themes/tiddlywiki/example/options.multids
@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/example/options/
+
+sidebarresizer: show
--- a/themes/tiddlywiki/example/plugin.info
+++ b/themes/tiddlywiki/example/plugin.info
@ -0,0 +1,9 @@
+{
+	"title": "$:/themes/tiddlywiki/example",
+	"name": "Example",
+	"author": "SimonHuber",
+	"core-version": ">=5.0.0",
+	"plugin-type": "theme",
+	"description": "Builds on top of various other themes",
+	"dependents": ["$:/themes/tiddlywiki/centralised","$:/themes/tiddlywiki/tight","$:/themes/tiddlywiki/seamless","$:/themes/tiddlywiki/snowwhite"]
+}
--- a/themes/tiddlywiki/heavier/options.multids
+++ b/themes/tiddlywiki/heavier/options.multids
@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/heavier/options/
+
+sidebarresizer: show
--- a/themes/tiddlywiki/readonly/options.multids
+++ b/themes/tiddlywiki/readonly/options.multids
@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/readonly/options/
+
+sidebarresizer: show
--- a/themes/tiddlywiki/seamless/options.multids
+++ b/themes/tiddlywiki/seamless/options.multids
@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/seamless/options/
+
+sidebarresizer: show
--- a/themes/tiddlywiki/snowwhite/base.tid
+++ b/themes/tiddlywiki/snowwhite/base.tid
@ -1,10 +1,6 @@
 title: $:/themes/tiddlywiki/snowwhite/base
 tags: [[$:/tags/Stylesheet]]

-\define sidebarbreakpoint-minus-one()
-<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
-\end
-
 \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline

 .tc-sidebar-header {
--- a/themes/tiddlywiki/snowwhite/options.multids
+++ b/themes/tiddlywiki/snowwhite/options.multids
@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/snowwhite/options/
+
+sidebarresizer: show
--- a/themes/tiddlywiki/starlight/options.multids
+++ b/themes/tiddlywiki/starlight/options.multids
@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/starlight/options/
+
+sidebarresizer: show
--- a/themes/tiddlywiki/tight-heavier/options.multids
+++ b/themes/tiddlywiki/tight-heavier/options.multids
@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/tight-heavier/options/
+
+sidebarresizer: show
--- a/themes/tiddlywiki/tight/base.tid
+++ b/themes/tiddlywiki/tight/base.tid
@ -1,12 +1,12 @@
 title: $:/themes/tiddlywiki/tight/base
 tags: [[$:/tags/Stylesheet]]

-\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline conditional

-@media (max-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+@media (max-width: <<sidebarbreakpoint-minus-one>>) {
 }

-@media (min-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}) {
+@media (min-width: <<sidebarbreakpoint>>) {

 	html body.tc-body {
 		font-size: 13px;
@ -27,7 +27,7 @@ tags: [[$:/tags/Stylesheet]]
 	}

 	html body.tc-body section.tc-story-river {
-		padding: 0px;
+		padding: 0px <<get.theme.metric storypaddingright>> 0px <<get.theme.metric storypaddingleft>>;
 	}

 	html body.tc-body div.tc-tiddler-frame {
@ -38,6 +38,27 @@ tags: [[$:/tags/Stylesheet]]
 		padding: 12px 0 12px 12px;
 	}

+	html body.tc-body .tc-sidebar-left div.tc-sidebar-scrollable {
+		padding: 12px 12px 12px 12px;
+	}
+
+	html[dir="rtl"] body.tc-body .tc-sidebar-left div.tc-sidebar-scrollable {
+		padding: 12px 12px 12px 0;
+	}
+
+	<%if [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]] %>
+
+		html body.tc-body div.tc-sidebar-scrollable {
+			left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + 42px),calc(<<get.theme.metric storyright>> + 42px),calc(100% - <<get.theme.metric sidebarminwidth>> + 42px));
+		}
+
+		html body.tc-body .tc-sidebar-left div.tc-sidebar-scrollable {
+			left: 0;
+			right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + 42px),calc(<<get.theme.metric storyright>> + 42px),calc(100% - <<get.theme.metric sidebarminwidth>> + 42px));
+		}
+
+	<% endif %>
+
 	html body.tc-body .tc-tiddler-frame .tc-subtitle {
 		font-size: 0.7em;
 		font-weight: 700;
--- a/themes/tiddlywiki/tight/functions.tid
+++ b/themes/tiddlywiki/tight/functions.tid
@ -0,0 +1,10 @@
+title: $:/themes/tiddlywiki/tight/functions
+
+\function set.centralised() no
+\function set.storywidth.storyright() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]]
+\function set.sidebarwidth() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]]
+
+\function get.story-sidebar.overlap() 0px
+
+\function sidebar.resizer.maxwidth() 12px
+\function sidebar.resizer.width() [<sidebar.resizer.maxwidth>]
--- a/themes/tiddlywiki/tight/metrics.multids
+++ b/themes/tiddlywiki/tight/metrics.multids
@ -0,0 +1,9 @@
+title: $:/themes/tiddlywiki/tight/metrics/
+
+sidebarpadding: 0px
+sidebarwidth: 350px
+storypaddingleft: 0px
+storypaddingright: 0px
+storyright: 770px
+storywidth: 770px
+tiddlerwidth: 770px
--- a/themes/tiddlywiki/tight/options.multids
+++ b/themes/tiddlywiki/tight/options.multids
@ -0,0 +1,3 @@
+title: $:/themes/tiddlywiki/tight/options/
+
+sidebarresizer: show
--- a/themes/tiddlywiki/vanilla/ThemeTweaks.tid
+++ b/themes/tiddlywiki/vanilla/ThemeTweaks.tid
@ -2,6 +2,12 @@ title: $:/themes/tiddlywiki/vanilla/themetweaks
 tags: $:/tags/ControlPanel/Appearance
 caption: {{$:/language/ThemeTweaks/ThemeTweaks}}

+\function get.theme-tweaks.metric() [get.theme<metric>]
+
+\procedure get-theme-tweaks-lingo() <$transclude $variable="lingo" title=`Metrics/$(metricName)$`/>
+
+\procedure get-theme-tweaks-lingo-hint() <$transclude $variable="lingo" title=`Metrics/$(metricName)$/Hint`/>
+
 \define lingo-base() $:/language/ThemeTweaks/

 \define replacement-text()
@ -45,6 +51,8 @@ caption: {{$:/language/ThemeTweaks/ThemeTweaks}}
 </$select>
 \end

+\whitespace trim
+
 <<lingo ThemeTweaks/Hint>>

 ! <<lingo Options>>
@ -52,6 +60,8 @@ caption: {{$:/language/ThemeTweaks/ThemeTweaks}}
 |<$link to="$:/themes/tiddlywiki/vanilla/options/sidebarlayout"><<lingo Options/SidebarLayout>></$link> |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/sidebarlayout"><option value="fixed-fluid"><<lingo Options/SidebarLayout/Fixed-Fluid>></option><option value="fluid-fixed"><<lingo Options/SidebarLayout/Fluid-Fixed>></option></$select> |
 |<$link to="$:/themes/tiddlywiki/vanilla/options/stickytitles"><<lingo Options/StickyTitles>></$link><br>//<<lingo Options/StickyTitles/Hint>>// |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/stickytitles"><option value="no">{{$:/language/No}}</option><option value="yes">{{$:/language/Yes}}</option></$select> |
 |<$link to="$:/themes/tiddlywiki/vanilla/options/codewrapping"><<lingo Options/CodeWrapping>></$link> |<$select tiddler="$:/themes/tiddlywiki/vanilla/options/codewrapping"><option value="pre">{{$:/language/No}}</option><option value="pre-wrap">{{$:/language/Yes}}</option></$select> |
+|<$link to={{{ [function[get.base.theme.option],<get.current.theme>,[sidebarposition]first[]] }}}><<lingo Options/SidebarPosition>></$link> |<$select tiddler={{{ [function[get.base.theme.option],<get.current.theme>,[sidebarposition]first[]] }}}><option value="right">{{$:/language/Right}}</option><option value="left">{{$:/language/Left}}</option></$select> |
+|<$link to={{{ [function[get.base.theme.option],<get.current.theme>,[sidebarresizer]first[]] }}}><<lingo Options/SidebarResizer>></$link> |<$select tiddler={{{ [function[get.base.theme.option],<get.current.theme>,[sidebarresizer]first[]] }}}><option value="hide">{{$:/language/No}}</option><option value="show">{{$:/language/Yes}}</option></$select> |

 ! <<lingo Settings>>

@ -64,14 +74,16 @@ caption: {{$:/language/ThemeTweaks/ThemeTweaks}}

 ! <<lingo Metrics>>

-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/fontsize"><<lingo Metrics/FontSize>></$link> |<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/fontsize" default="" tag="input"/> |
-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/lineheight"><<lingo Metrics/LineHeight>></$link> |<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/lineheight" default="" tag="input"/> |
-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize"><<lingo Metrics/BodyFontSize>></$link> |<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize" default="" tag="input"/> |
-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/bodylineheight"><<lingo Metrics/BodyLineHeight>></$link> |<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/bodylineheight" default="" tag="input"/> |
-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storyleft"><<lingo Metrics/StoryLeft>></$link><br>//<<lingo Metrics/StoryLeft/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyleft" default="" tag="input"/> |
-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storytop"><<lingo Metrics/StoryTop>></$link><br>//<<lingo Metrics/StoryTop/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storytop" default="" tag="input"/> |
-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storyright"><<lingo Metrics/StoryRight>></$link><br>//<<lingo Metrics/StoryRight/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storyright" default="" tag="input"/> |
-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/storywidth"><<lingo Metrics/StoryWidth>></$link><br>//<<lingo Metrics/StoryWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/storywidth" default="" tag="input"/> |
-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth"><<lingo Metrics/TiddlerWidth>></$link><br>//<<lingo Metrics/TiddlerWidth/Hint>>//<br> |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth" default="" tag="input"/> |
-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint"><<lingo Metrics/SidebarBreakpoint>></$link><br>//<<lingo Metrics/SidebarBreakpoint/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint" default="" tag="input"/> |
-|<$link to="$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth"><<lingo Metrics/SidebarWidth>></$link><br>//<<lingo Metrics/SidebarWidth/Hint>>// |^<$edit-text tiddler="$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth" default="" tag="input"/> |
+<<lingo Metrics/SidebarResizer/Hint>>
+
+<table>
+<tbody>
+<$list filter="FontSize LineHeight BodyFontSize BodyLineHeight StoryLeft StoryTop StoryRight StoryWidth StoryMinWidth StoryPaddingLeft StoryPaddingRight TiddlerWidth SidebarBreakpoint SidebarWidth SidebarPadding SliderOpacity SliderOpacityHover PreviewSliderWidth :except[<get.theme.option sidebarlayout>match[fluid-fixed]then[StoryRight StoryWidth TiddlerWidth]enlist-input[]] :except[<get.theme.option sidebarlayout>match[fixed-fluid]then[SidebarWidth]]" variable="metricName" counter="counter">
+<$set name="metric" value={{{ [<metricName>lowercase[]] }}}>
+<tr class={{{ [<counter>remainder[2]match[0]then[oddRow]] :else[[evenRow]] }}}>
+<td><$link to=<<get.theme-tweaks.metric>>><<get-theme-tweaks-lingo>></$link><br>//<<get-theme-tweaks-lingo-hint>>//  </td><td><$edit-text tiddler=<<get.theme-tweaks.metric>> default="" tag="input"/> </td>
+</tr>
+</$set>
+</$list>
+</tbody>
+</table>
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@ -23,14 +23,6 @@ background-size:` {{$:/themes/tiddlywiki/vanilla/settings/backgroundimagesize}}`
 </$set>
 \end

-\define sidebarbreakpoint()
-<$text text={{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}}/>
-\end
-
-\define sidebarbreakpoint-minus-one()
-<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
-\end
-
 \define if-fluid-fixed(text,hiddenSidebarText)
 <$reveal state="$:/themes/tiddlywiki/vanilla/options/sidebarlayout" type="match" text="fluid-fixed">
 $text$
@ -63,6 +55,8 @@ $else$
 </$set>
 \end

+\import [function[get.base.functions.theme],<get.current.theme>first[]is[tiddler]] :else[function[get.base.functions.theme],<get.current.theme>first[]is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/functions]]
+
 \rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock

 /*
@ -1034,36 +1028,91 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	.tc-sidebar-scrollable {
 		position: fixed;
 		top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
-		left: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
 		bottom: 0;
 		right: 0;
 		overflow-y: auto;
 		overflow-x: auto;
 		-webkit-overflow-scrolling: touch;
 		margin: 0 0 0 -42px;
-		padding: 71px 0 28px 42px;
+		padding: 71px 0 28px <<get.theme.metric sidebarpadding>>;
+	}
+
+	.tc-story-river {
+		top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
+		padding: 42px <<get.theme.metric storypaddingright>> 42px <<get.theme.metric storypaddingleft>>;
+	}
+
+	html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable, .tc-sidebar-left .tc-sidebar-scrollable {
+		left: 0;
+		margin: 0 -42px 0 0;
 	}

 	html[dir="rtl"] .tc-sidebar-scrollable {
-		left: auto;
-		right: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
+		padding-right: <<get.theme.metric sidebarpadding>>;
+		padding-left: 0;
+	}
+
+	.tc-sidebar-scrollable {
+		left: clamp(min(calc(<<get.theme.metric storyminwidth>> + <<get.theme.metric storyleft>> - <<get.theme.storywidthoverlap>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>>),calc(100% - <<get.theme.metric sidebarminwidth>>)),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>>));
+	}
+
+	html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable, .tc-sidebar-left .tc-sidebar-scrollable {
+		right: clamp(min(calc(<<get.theme.metric storyminwidth>> + <<get.theme.metric storyleft>> - <<get.theme.storywidthoverlap>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>>),calc(100% - <<get.theme.metric sidebarminwidth>>)),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>>));
+	}
+
+	html[dir="rtl"] .tc-sidebar-scrollable:not(.tc-sidebar-left .tc-sidebar-scrollable) {
+		left: clamp(min(calc(<<get.theme.metric storyminwidth>> + <<get.theme.metric storyleft>> - <<get.theme.storywidthoverlap>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>>),calc(100% - <<get.theme.metric sidebarminwidth>>)),<<get.theme.metric storyright>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>>));
 	}

 	.tc-story-river {
-		position: relative;
-		left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
-		top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
-		width: {{$:/themes/tiddlywiki/vanilla/metrics/storywidth}};
-		padding: 42px 42px 42px 42px;
+		left: max(0px,<<get.theme.metric storyleft>>);
+		right: min(clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.storywidthoverlap>> - <<get.story-sidebar.overlap>>),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>)),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>));
+		width: clamp(<<get.theme.metric storyminwidth>>,<<get.theme.metric storywidth>>,calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> - <<get.theme.metric storyleft>> + <<get.theme.storywidthoverlap>>));
 	}

-<<if-no-sidebar "
+	.tc-sidebar-left .tc-story-river {
+		display: flex;
+		align-items: flex-end;
+		flex-direction: column;
+		left: min(clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.storywidthoverlap>> - <<get.story-sidebar.overlap>>),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>)),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>));
+		right: max(0px,<<get.theme.metric storyleft>>);
+	}
+
+	html[dir="rtl"] .tc-sidebar-left .tc-story-river {
+		align-items: flex-start;
+		left: min(clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.storywidthoverlap>> - <<get.story-sidebar.overlap>>),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>)),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>));
+		right: max(0px,<<get.theme.metric storyleft>>);
+	}
+
+	html[dir="rtl"] .tc-story-river:not(.tc-sidebar-left .tc-story-river) {
+		display: flex;
+		align-items: flex-end;
+		flex-direction: column;
+		right: min(clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.theme.storywidthoverlap>> - <<get.story-sidebar.overlap>>),calc(100% - <<get.theme.metric storywidth>> - <<get.theme.metric storyleft>>),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>)),calc(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>>));
+	}
+
+<<if-no-sidebar """

 	.tc-story-river {
-		width: calc(100% - {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
+		width: calc(100% - max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}}));
 	}

-">>
+	.tc-sidebar-left .tc-story-river {
+		right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
+		left: 0;
+	}
+
+	html[dir="rtl"] .tc-sidebar-left .tc-story-river {
+		left: 0;
+		right: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
+	}
+
+	html[dir="rtl"] .tc-story-river:not(.tc-sidebar-left .tc-story-river) {
+		right: 0;
+		left: max(0px,{{$:/themes/tiddlywiki/vanilla/metrics/storyleft}});
+	}
+
+""">>

 	.tc-story-river.tc-static-story-river {
 		margin-right: 0;
@ -1164,14 +1213,20 @@ button.tc-btn-invisible.tc-remove-tag-button {
@media (min-width: <<sidebarbreakpoint>>) {
 	.tc-tiddler-frame {
 		padding: 28px 42px 42px 42px;
-		width: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}};
+		width: clamp(calc(<<get.theme.metric storyminwidth>> - 84px),calc(<<get.theme.metric tiddlerwidth>>),100%);
 		border-radius: 2px;
 	}

+	.tc-sidebar-left .tc-tiddler-frame {
+		width: clamp(calc(<<get.theme.metric storyminwidth>> - 84px),calc(<<get.theme.metric tiddlerwidth>>),100%);
+	}
+
 <<if-no-sidebar "

-	.tc-tiddler-frame {
+	.tc-tiddler-frame, .tc-sidebar-left .tc-tiddler-frame {
 		width: 100%;
+		left: auto;
+		right: auto;
 	}

 ">>
@ -1251,6 +1306,10 @@ button.tc-btn-invisible.tc-remove-tag-button {
 	padding: 3px; /* make space for outline */
 }

+html[dir="rtl"] .tc-tiddler-frame .tc-tiddler-controls {
+	float: left;
+}
+
 .tc-tiddler-controls .tc-drop-down {
 	font-size: 0.6em;
 }
@ -1308,7 +1367,7 @@ button.tc-btn-invisible.tc-remove-tag-button {

 .tc-tiddler-frame .tc-edit-texteditor {
 	width: 100%;
-	margin: 4px 0 4px 0;
+	margin: 4px 0 3px 0;
 }

 .tc-tiddler-frame input.tc-edit-texteditor,
@ -1335,6 +1394,7 @@ button.tc-btn-invisible.tc-remove-tag-button {

 .tc-tiddler-frame iframe.tc-edit-texteditor {
 	background-color: <<colour tiddler-background>>;
+	z-index: 1;
 }

 .tc-tiddler-frame .tc-edit-fields input.tc-edit-fieldeditor,
@ -1404,7 +1464,11 @@ html body.tc-body.tc-single-tiddler-window {
 */

 .tc-editor-toolbar {
-	margin-top: 8px;
+	background-color: <<colour tiddler-background>>;
+	z-index: 2;
+	padding-top: 8px;
+	margin-left: -2px;
+	margin-right: -2px;
 }

 .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-editor-toolbar,
@ -1483,15 +1547,27 @@ html body.tc-body.tc-single-tiddler-window {
 <<if-fluid-fixed text:"""

 	.tc-story-river {
-		padding-right: 0;
 		position: relative;
 		width: auto;
 		left: 0;
-		margin-left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
-		margin-right: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
+		margin-left: max(0px,<<get.theme.metric storyleft>>);
+		margin-right: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.story-sidebar.overlap>>),calc(<<get.theme.metric sidebarwidth>> - <<get.story-sidebar.overlap>>),calc(100% - <<get.theme.metric storyleft>> - <<get.theme.metric storyminwidth>> + <<get.story-sidebar.overlap>>));
 	}

-	.tc-tiddler-frame {
+	html[dir="rtl"] .tc-sidebar-left .tc-story-river, .tc-sidebar-left .tc-story-river {
+		margin-right: max(0px,<<get.theme.metric storyleft>>);
+		margin-left: clamp(calc(<<get.theme.metric sidebarminwidth>> - <<get.story-sidebar.overlap>>),calc(<<get.theme.metric sidebarwidth>> - <<get.story-sidebar.overlap>>),calc(100% - <<get.theme.metric storyleft>> - <<get.theme.metric storyminwidth>>));
+		left: auto;
+		width: auto;
+		right: 0;
+	}
+
+	html[dir="rtl"] .tc-story-river:not(.tc-sidebar-left .tc-story-river) {
+		left: auto;
+		right: 0;
+	}
+
+	.tc-tiddler-frame, .tc-sidebar-left .tc-tiddler-frame {
 		width: 100%;
 	}

@ -1499,7 +1575,23 @@ html body.tc-body.tc-single-tiddler-window {
 		left: auto;
 		bottom: 0;
 		right: 0;
-		width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
+		width: clamp(<<get.theme.metric sidebarminwidth>>,<<get.theme.metric sidebarwidth>>,(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>> + <<get.story-sidebar.overlap>> - <<get.theme.storyleftpadding.excess>> - <<get.theme.storyrightpadding.excess>>));
+	}
+
+	.tc-sidebar-left .tc-sidebar-scrollable {
+		left: 0;
+		right: auto;
+		width: clamp(<<get.theme.metric sidebarminwidth>>,<<get.theme.metric sidebarwidth>>,(100% - <<get.theme.metric storyminwidth>> - <<get.theme.metric storyleft>> + <<get.story-sidebar.overlap>> - <<get.theme.storyleftpadding.excess>> - <<get.theme.storyrightpadding.excess>>));
+	}
+
+	html[dir="rtl"] .tc-sidebar-left .tc-sidebar-scrollable {
+		padding-right: <<get.theme.metric sidebarpadding>>;
+		right: auto;
+	}
+
+	html[dir="rtl"] .tc-sidebar-scrollable:not(.tc-sidebar-left .tc-sidebar-scrollable) {
+		padding-right: <<get.theme.metric sidebarpadding>>;
+		padding-left: 0;
 	}

 	body.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {
@ -1510,10 +1602,19 @@ html body.tc-body.tc-single-tiddler-window {
 """ hiddenSidebarText:"""

 	.tc-story-river {
-		padding-right: 3em;
 		margin-right: 0;
 	}

+	.tc-sidebar-left .tc-story-river {
+		margin-left: max(0px,<<get.theme.metric storyleft>>);
+		margin-right: 0;
+	}
+
+	html[dir="rtl"] .tc-sidebar-left .tc-story-river {
+		margin-left: 0;
+		margin-right: max(0px,<<get.theme.metric storyleft>>);
+	}
+
 	body.tc-body .tc-page-container.tc-page-view-zoomin .tc-tiddler-frame {
 		width: 100%;
 		width: calc(100% - 84px);
@ -1629,6 +1730,7 @@ html body.tc-body.tc-single-tiddler-window {
 		"editor preview";
 	grid-template-columns: repeat(2, minmax(0px, 1fr));
 	grid-template-rows: auto 1fr;
+	width: 100%;
 }

 .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden {
@ -1637,15 +1739,22 @@ html body.tc-body.tc-single-tiddler-window {
 		"editor";
 	grid-template-columns: 1fr;
 	grid-template-rows: auto 1fr;
+	width: 100%;
 }

 .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview {
 	grid-area: preview;
 	overflow-wrap: anywhere;
+	min-height: 100px;
 	word-break: normal;
 	border: 1px solid <<colour tiddler-editor-border>>;
-	margin: 4px 0 3px 3px;
+	margin: 4px 0 3px 0;
 	padding: 3px 3px 3px 3px;
+	z-index: 1;
+}
+
+.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview .tc-tiddler-preview-preview > iframe[sandbox] {
+	width: 100%;
 }

 <<if-editor-height-fixed then:"""
@ -1666,6 +1775,7 @@ html body.tc-body.tc-single-tiddler-window {
 .tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview-hidden canvas.tc-edit-bitmapeditor {
 	grid-area: editor;
 	max-width: 100%;
+	z-index: 1;
 }

 .tc-edit-fields {
@ -3564,6 +3674,36 @@ span.tc-translink > a:first-child {
 	word-break: break-all;
 }

+html[dir="rtl"] .tc-tiny-gap-left {
+	margin-right: .25em;
+	margin-left: auto;
+}
+
+html[dir="rtl"] .tc-tiny-gap-right {
+	margin-left: .25em;
+	margin-right: auto;
+}
+
+html[dir="rtl"] .tc-small-gap-left {
+	margin-right: .5em;
+	margin-left: auto;
+}
+
+html[dir="rtl"] .tc-small-gap-right {
+	margin-left: .5em;
+	margin-right: auto;
+}
+
+html[dir="rtl"] .tc-big-gap-left {
+	margin-right: 1em;
+	margin-left: auto;
+}
+
+html[dir="rtl"] .tc-big-gap-right {
+	margin-left: 1em;
+	margin-right: auto;
+}
+
 /* Vertical gaps */

 .tc-tiny-v-gap-bottom {
--- a/themes/tiddlywiki/vanilla/functions.tid
+++ b/themes/tiddlywiki/vanilla/functions.tid
@ -0,0 +1,10 @@
+title: $:/themes/tiddlywiki/vanilla/functions
+
+\function set.centralised() no
+\function set.storywidth.storyright() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fixed-fluid]then[yes]] :else[[no]]
+\function set.sidebarwidth() [{$:/themes/tiddlywiki/vanilla/options/sidebarlayout}match[fluid-fixed]then[yes]] :else[[no]]
+
+\function get.story-sidebar.overlap() 42px
+
+\function sidebar.resizer.maxwidth() 21px
+\function sidebar.resizer.width() [<get.theme.option sidebarposition>!match[left]then[min(calc(]addsuffix<get.theme.metric storypaddingright>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]] :else[[min(calc(]addsuffix<get.theme.metric storypaddingleft>addsuffix[ / 2),]addsuffix<sidebar.resizer.maxwidth>addsuffix[)]]
--- a/themes/tiddlywiki/vanilla/metrics.multids
+++ b/themes/tiddlywiki/vanilla/metrics.multids
@ -4,10 +4,18 @@ bodyfontsize: 15px
 bodylineheight: 22px
 fontsize: 14px
 lineheight: 20px
+previewsliderwidth: 10px
+sidebarbreakpoint: 960px
+sidebarminwidth: 350px
+sidebarpadding: 42px
+sidebarwidth: 350px
+slideropacity: 0.1
+slideropacityhover: 0.6
 storyleft: 0px
+storypaddingleft: 42px
+storyminwidth: 168px
 storytop: 0px
 storyright: 770px
+storypaddingright: 42px
 storywidth: 770px
 tiddlerwidth: 686px
-sidebarbreakpoint: 960px
-sidebarwidth: 350px
--- a/themes/tiddlywiki/vanilla/options.multids
+++ b/themes/tiddlywiki/vanilla/options.multids
@ -1,5 +1,7 @@
 title: $:/themes/tiddlywiki/vanilla/options/

-stickytitles: no
-sidebarlayout: fixed-fluid
 codewrapping: pre-wrap
+sidebarlayout: fixed-fluid
+sidebarposition: right
+sidebarresizer: show
+stickytitles: no
--- a/themes/tiddlywiki/vanilla/sidebar-resizer.tid
+++ b/themes/tiddlywiki/vanilla/sidebar-resizer.tid
@ -0,0 +1,257 @@
+title: $:/themes/tiddlywiki/vanilla/sidebar-resizer
+tags: [[$:/tags/Stylesheet]]
+code-body: yes
+
+\import [function[get.base.functions.theme],<get.current.theme>first[]is[tiddler]] :else[function[get.base.functions.theme],<get.current.theme>first[]is[shadow]] :else[[$:/themes/tiddlywiki/vanilla/functions]]
+
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock conditional html
+
+.tc-slider {
+	position: fixed;
+	top: 0;
+	height: 100%;
+	width: <<sidebar.resizer.width>>;
+	opacity: <<get.theme.metric slideropacity>>;
+	cursor: ew-resize;
+	background: linear-gradient(<<colour muted-foreground>>, <<colour muted-foreground>>) no-repeat center/2px 100%;
+}
+
+.tc-slider:hover {
+	opacity: <<get.theme.metric slideropacityhover>>;
+}
+
+.tc-slider-pointerdown-eventcatcher, .tc-slider-pointermove-eventcatcher-wrapper {
+	height: 100%;
+}
+
+.tc-edit-texteditor-slider > .tc-slider-pointerdown-eventcatcher.tc-editor-preview-eventcatcher {
+	position: absolute;
+	width: 100%;
+	top: 0;
+	left: 0;
+}
+
+.tc-slider-pointermove-eventcatcher, .tc-slider-pointermove {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	min-height: 100%;
+	z-index: -1;
+}
+
+.tc-slider-pointerdown-eventcatcher:not(.tc-main-slider), .tc-slider-pointermove-eventcatcher:not(.tc-main-slider), .tc-slider-pointermove-eventcatcher-wrapper:not(.tc-main-slider) {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	align-items: stretch;
+}
+
+.tc-slider-pointermove-eventcatcher-wrapper:not(.tc-main-slider) {
+	position: absolute;
+	width: 100%;
+	flex-direction: row;
+}
+
+.tc-slider-pointerdown-eventcatcher:not(.tc-main-slider) {
+	position: relative;
+}
+
+.tc-slider, .tc-slider-pointermove-eventcatcher, .tc-slider-pointermove {
+	touch-action: none;
+	user-select: none;
+}
+
+.tc-slider-pointermove-eventcatcher-wrapper.tc-main-slider.tc-resizer-active {
+	z-index: 801;
+}
+
+.tc-slider-pointermove-eventcatcher.tc-main-slider.tc-resizer-active {
+	z-index: 802;
+}
+
+.tc-slider-pointermove.tc-main-slider.tc-resizer-active {
+	z-index: 803;
+}
+
+.tc-slider-pointermove.tc-resizer-active {
+	cursor: ew-resize;
+}
+
+.tc-slider-pointermove-eventcatcher-wrapper.tc-resizer-active:not(.tc-main-slider) {
+	z-index: 2;
+}
+
+.tc-slider-pointermove-eventcatcher.tc-resizer-active:not(.tc-main-slider) {
+	z-index: 3;
+}
+
+.tc-slider-pointermove.tc-resizer-active:not(.tc-main-slider) {
+	z-index: 4;
+}
+
+.tc-slider.tc-resizer-active {
+	opacity: <<get.theme.metric slideropacityhover>>;
+}
+
+<%if [<get.theme.explicit.option sidebarresizer>match[show]] %>
+
+	@media (min-width: <<sidebarbreakpoint>>) {
+
+		@media (pointer: coarse) {
+
+			.tc-slider.tc-main-slider {
+				background: <<colour muted-foreground>>;
+			}
+
+			.tc-slider.tc-main-slider:hover {
+				opacity: <<get.theme.metric slideropacity>>;
+			}
+		}
+
+		<%if [[$:/state/sidebar/resizing]is[tiddler]] %>
+
+			@media (pointer: coarse) {
+
+				.tc-slider.tc-main-slider {
+					opacity: min(calc(3 * <<get.theme.metric slideropacity>>),1);
+				}
+			}
+
+		<% endif %>
+
+		<%if [<set.storywidth.storyright>match[yes]] %>
+
+			.tc-slider.tc-main-slider {
+				left: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> + <<get.theme.storywidthoverlap>> - (2 * <<get.story-sidebar.overlap>> / 3)));
+			}
+
+			.tc-sidebar-left .tc-slider.tc-main-slider {
+				left: auto;
+				right: clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(<<get.theme.metric storyleft>> + <<get.theme.metric storywidth>> - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + <<get.story-sidebar.overlap>> + <<get.theme.storywidthoverlap>> - (2 * <<get.story-sidebar.overlap>> / 3)));
+			}
+
+		<% endif %>
+
+		<%if [<set.sidebarwidth>match[yes]] %>
+
+			.tc-slider.tc-main-slider {
+				left: min(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - <<get.story-sidebar.overlap>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3))),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3)));
+			}
+
+			.tc-sidebar-left .tc-slider.tc-main-slider {
+				left: auto;
+				right: min(clamp(calc(<<get.theme.metric storyleft>> + <<get.theme.metric storyminwidth>> + <<get.theme.storyleftpadding.excess>> + <<get.theme.storyrightpadding.excess>> - <<get.story-sidebar.overlap>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarwidth>> + (<<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3))),calc(100% - <<get.theme.metric sidebarminwidth>> + (<<get.story-sidebar.overlap>> / 3)));
+			}
+
+		<% endif %>
+
+		<%if [<set.centralised>match[yes]] %>
+
+			.tc-slider.tc-main-slider {
+				left: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3)));
+			}
+
+			.tc-sidebar-left .tc-slider.tc-main-slider {
+				left: auto;
+				z-index: 1;
+				right: min(calc(50% + (<<get.theme.metric storywidth>> / 2) - (2 * <<get.story-sidebar.overlap>> / 3)),calc(100% - <<get.theme.metric sidebarminwidth>> - (2 * <<get.story-sidebar.overlap>> / 3)));
+			}
+
+		<% endif %>
+
+		<%if [{$:/state/sidebar}match[no]] %>
+
+			.tc-slider-pointerdown-eventcatcher.tc-main-slider, .tc-slider-pointermove-eventcatcher-wrapper.tc-main-slider, .tc-slider-pointermove-eventcatcher.tc-main-slider, .tc-slider-pointermove.tc-main-slider, .tc-slider.tc-main-slider {
+				display: none;
+			}
+
+		<% endif %>
+
+	}
+
+	@media (max-width: <<sidebarbreakpoint-minus-one>>) {
+
+		.tc-slider-pointerdown-eventcatcher.tc-main-slider, .tc-slider-pointermove-eventcatcher-wrapper.tc-main-slider, .tc-slider-pointermove-eventcatcher.tc-main-slider, .tc-slider-pointermove.tc-main-slider, .tc-slider.tc-main-slider {
+			display: none;
+		}
+	}
+
+<% endif %>
+
+.tc-tiddler-frame iframe[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor,
+.tc-tiddler-frame textarea[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor,
+.tc-tiddler-frame div[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor,
+.tc-tiddler-frame canvas[class*="tc-edit-bitmapeditor-identified-"].tc-edit-bitmapeditor {
+	width: calc(100% - <<get.theme.metric previewsliderwidth>>);
+	min-width: 0px;
+}
+
+.tc-tiddler-frame iframe[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview,
+.tc-tiddler-frame textarea[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview,
+.tc-tiddler-frame div[class*="tc-edit-texteditor-identified-"].tc-edit-texteditor + .tc-tiddler-preview-preview,
+.tc-tiddler-frame canvas[class*="tc-edit-bitmapeditor-identified-"].tc-edit-bitmapeditor + .tc-tiddler-preview-preview {
+	min-width: 0px;
+}
+
+div[class*="tc-editor-preview-slider-"] {
+	position: absolute;
+	left: calc(50% - <<get.theme.metric previewsliderwidth>>);
+	width: <<get.theme.metric previewsliderwidth>>;
+}
+
+@media (pointer: coarse) {
+
+	div[class*="tc-editor-preview-slider-"] {
+		background-color: <<colour muted-foreground>>;
+	}
+
+	div[class*="tc-editor-preview-slider-"]:hover {
+		opacity: <<get.theme.metric slideropacityhover>>;
+	}
+
+}
+
+<$list filter="[all[tiddlers]prefix[$:/state/resizer/previewwidth-]]" variable="previewWidthTiddler">
+
+	<$let
+		identifier={{{ [<previewWidthTiddler>removeprefix[$:/state/resizer/previewwidth-]] }}}
+		width={{{ [<previewWidthTiddler>get[text]] }}}>
+
+		.tc-tiddler-frame .tc-tiddler-editor.tc-tiddler-preview.tc-tiddler-preview-identified-<<identifier>> {
+			grid-template-columns: calc(100% - <<width>>) <<width>>;
+		}
+
+		div.tc-slider.tc-editor-preview-slider-<<identifier>> {
+			left: calc(100% - <<width>> - <<get.theme.metric previewsliderwidth>>);
+		}
+
+		<%if [[$:/state/resizing/editor-preview-]addsuffix<identifier>is[tiddler]] %>
+
+			div.tc-slider.tc-editor-preview-slider-<<identifier>> {
+				opacity: min(<<get.theme.metric slideropacityhover>>,1);
+			}
+
+		<% endif %>
+
+		<%if [<width>compare:number:lteq[1]] %>
+
+			.tc-tiddler-preview-preview-identified-<<identifier>> {
+				display: none;
+			}
+
+		<% endif %>
+
+		<%if [<width>compare:number:gteq[99]] %>
+
+			.tc-edit-texteditor-identified-<<identifier>> {
+				display: none;
+			}
+
+		<% endif %>
+
+	</$let>
+
+</$list>