From e5f4dd0725d6814bd8aed0a8983345754fa70694 Mon Sep 17 00:00:00 2001
From: BurningTreeC <huber.simon@protonmail.com>
Date: Fri, 23 Feb 2024 15:28:35 +0100
Subject: [PATCH] first commit

---
 .../navigation/edit-missing-tiddlers.tid      |   3 +
 TiddlyFlex/config/sidebar/width.tid           |   3 +
 TiddlyFlex/config/story-river/padding.tid     |   3 +
 .../story-river/tiddler/margin-bottom.tid     |   3 +
 TiddlyFlex/css/base.tid                       | 269 ++++++++++++++++++
 TiddlyFlex/css/narrow.tid                     |  51 ++++
 TiddlyFlex/css/scroll-margins.tid             |  50 ++++
 TiddlyFlex/css/z-indexes.tid                  |  23 ++
 .../files/modules/utils/dom/scroller.js       |  97 +++++++
 .../modules/widgets/subclasses/navigator.js   |  73 +++++
 TiddlyFlex/files/tiddlywiki.files             |  19 ++
 TiddlyFlex/global/globals.tid                 |  67 +++++
 TiddlyFlex/license.tid                        |  29 ++
 TiddlyFlex/plugin.info                        |   7 +
 TiddlyFlex/readme.tid                         |   5 +
 TiddlyFlex/ui/Layout.tid                      |  76 +++++
 TiddlyFlex/ui/Templates/sidebar.tid           |  33 +++
 TiddlyFlex/ui/Templates/story.tid             |  69 +++++
 18 files changed, 880 insertions(+)
 create mode 100644 TiddlyFlex/config/navigation/edit-missing-tiddlers.tid
 create mode 100644 TiddlyFlex/config/sidebar/width.tid
 create mode 100644 TiddlyFlex/config/story-river/padding.tid
 create mode 100644 TiddlyFlex/config/story-river/tiddler/margin-bottom.tid
 create mode 100644 TiddlyFlex/css/base.tid
 create mode 100644 TiddlyFlex/css/narrow.tid
 create mode 100644 TiddlyFlex/css/scroll-margins.tid
 create mode 100644 TiddlyFlex/css/z-indexes.tid
 create mode 100644 TiddlyFlex/files/modules/utils/dom/scroller.js
 create mode 100644 TiddlyFlex/files/modules/widgets/subclasses/navigator.js
 create mode 100644 TiddlyFlex/files/tiddlywiki.files
 create mode 100644 TiddlyFlex/global/globals.tid
 create mode 100644 TiddlyFlex/license.tid
 create mode 100644 TiddlyFlex/plugin.info
 create mode 100644 TiddlyFlex/readme.tid
 create mode 100644 TiddlyFlex/ui/Layout.tid
 create mode 100644 TiddlyFlex/ui/Templates/sidebar.tid
 create mode 100644 TiddlyFlex/ui/Templates/story.tid

diff --git a/TiddlyFlex/config/navigation/edit-missing-tiddlers.tid b/TiddlyFlex/config/navigation/edit-missing-tiddlers.tid
new file mode 100644
index 0000000..a05ae02
--- /dev/null
+++ b/TiddlyFlex/config/navigation/edit-missing-tiddlers.tid
@@ -0,0 +1,3 @@
+title: $:/config/tiddlyflex/navigation/edit-missing-tiddlers
+
+no
\ No newline at end of file
diff --git a/TiddlyFlex/config/sidebar/width.tid b/TiddlyFlex/config/sidebar/width.tid
new file mode 100644
index 0000000..2302745
--- /dev/null
+++ b/TiddlyFlex/config/sidebar/width.tid
@@ -0,0 +1,3 @@
+title: $:/config/tiddlyflex/sidebar/width
+
+30%
\ No newline at end of file
diff --git a/TiddlyFlex/config/story-river/padding.tid b/TiddlyFlex/config/story-river/padding.tid
new file mode 100644
index 0000000..3c80fca
--- /dev/null
+++ b/TiddlyFlex/config/story-river/padding.tid
@@ -0,0 +1,3 @@
+title: $:/config/tiddlyflex/story-river/padding
+
+42px
\ No newline at end of file
diff --git a/TiddlyFlex/config/story-river/tiddler/margin-bottom.tid b/TiddlyFlex/config/story-river/tiddler/margin-bottom.tid
new file mode 100644
index 0000000..c10dc97
--- /dev/null
+++ b/TiddlyFlex/config/story-river/tiddler/margin-bottom.tid
@@ -0,0 +1,3 @@
+title: $:/config/tiddlyflex/story-river/tiddler/margin-bottom
+
+28px
\ No newline at end of file
diff --git a/TiddlyFlex/css/base.tid b/TiddlyFlex/css/base.tid
new file mode 100644
index 0000000..8bf5913
--- /dev/null
+++ b/TiddlyFlex/css/base.tid
@@ -0,0 +1,269 @@
+title: $:/plugins/BTC/TiddlyFlex/styles/base
+tags: $:/tags/Stylesheet
+
+.tc-tiddlyflex-container {
+	display: flex;
+	flex-flow: column;
+	justify-content: flex-start;
+	align-items: stretch;
+	height: 100vh;
+	max-height: 100vh;
+	width: 100vw;
+	max-width: 100vw;
+	outline: none;
+	overflow: clip;
+}
+
+.tc-tiddlyflex-main {
+	display: flex;
+	flex-direction: row;
+	flex-grow; 0;
+	flex-shrink: 1;
+	flex-basis: 100%;
+	max-height: 100%;
+	position: relative;
+}
+
+@media (min-width: 800px) {
+
+	.tc-flex-main {
+		overflow-x: clip;
+	}
+
+}
+
+.tc-tiddlyflex-header {
+	flex-grow: 0;
+	flex-shrink: 0;
+	box-shadow: 0 1px 5px -1px <<colour tiddlyflex-box-shadow>>;
+	z-index: 999;
+	background-color: <<colour page-background>>;
+}
+
+.tc-flex-footer {
+	flex-grow: 0;
+	flex-shrink: 0;
+	box-shadow: 0 -1px 5px -1px <<colour tiddlyflex-box-shadow>>;
+	z-index: 999;
+	background-color: <<colour page-background>>;
+}
+
+/***************/
+/* STORY RIVER */
+/***************/
+
+.tc-tiddlyflex-story-river-container {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	flex-grow: 1;
+	flex-shrink: 0;
+	flex-basis: calc(100% - {{$:/config/tiddlyflex/sidebar/width}});
+	transition: flex-basis {{$:/config/AnimationDuration}}ms;
+	overflow: hidden;
+	max-height: 100%;
+}
+
+<% if [{$:/state/sidebar}match[no]] %>
+
+.tc-tiddlyflex-story-river-container {
+	flex-basis: 100%;
+}
+
+<% endif %>
+
+.tc-tiddlyflex-story-river-container-inner {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: stretch;
+	max-height: 100%;
+	flex-grow: 1;
+	flex-shrink: 0;
+}
+
+@media (min-width: 800px) {
+
+	.tc-tiddlyflex-story-river-container-inner {
+		overflow: hidden;
+		flex-basis: 0;
+	}
+
+}
+
+.tc-flex-story-river-inner-inner {
+	flex-grow: 1;
+	flex-shrink: 1;
+	overflow-y: scroll;
+	scroll-behavior: smooth;
+}
+
+@media (min-width: 800px) {
+
+	.tc-flex-story-river-inner-inner {
+		flex-basis: 0;
+	}
+
+}
+
+.tc-tiddlyflex-story-river-wrapper {
+	display: flex;
+	flex-direction: column;
+	flex-shrink: 0;
+	flex-grow: 1;
+	overflow: hidden;
+}
+
+@media (min-width: 800px) {
+
+	.tc-tiddlyflex-story-river-wrapper {
+		flex-basis: 0;
+	}
+
+}
+
+.tc-tiddlyflex-story-river-wrapper-inner {
+	flex-grow: 1;
+	flex-shrink: 1;
+	overflow-y: scroll;
+	scroll-behavior: smooth;
+}
+
+@media (min-width: 800px) {
+
+	.tc-tiddlyflex-story-river-wrapper-inner {
+		flex-basis: 0;
+	}
+
+}
+
+.tc-tiddlyflex-story-river-wrapper .tc-tiddler-frame {
+	width: 100%;
+}
+
+.tc-tiddlyflex-story-river-wrapper-inner .tc-tiddlyflex-story-river {
+	padding: {{$:/config/tiddlyflex/story-river/padding}};
+	min-height: 100%;
+}
+
+.tc-tiddlyflex-story-river-inner > .tc-tiddler-frame, .tc-tiddlyflex-story-river-inner > .tc-tiddler-view-frame {
+	margin-bottom: {{$:/config/tiddlyflex/story-river/tiddler/margin-bottom}};
+}
+
+.tc-tiddlyflex-story-river .tc-navigating {
+	border: 2px dashed <<colour primary>>;
+}
+
+/***********/
+/* SIDEBAR */
+/***********/
+
+.tc-tiddlyflex-sidebar {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	flex-grow: 0;
+	flex-shrink: 0;
+	max-height: 100%;
+}
+
+@media (min-width: 800px) {
+
+	.tc-tiddlyflex-sidebar {
+		width: {{$:/config/tiddlyflex/sidebar/width}};
+	}
+
+}
+
+.tc-tiddlyflex-sidebar-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-start;
+	align-items: stretch;
+	max-height: 100%;
+	flex-grow: 1;
+	flex-shrink: 0;
+}
+
+.tc-tiddlyflex-sidebar-container-inner {
+	display: flex;
+	flex-grow: 1;
+	flex-shrink: 0;
+	overflow-y: auto;
+	scroll-behavior: smooth;
+	flex-basis: 0;
+	flex-direction: row;
+}
+
+.tc-tiddlyflex-sidebar-scrollable {
+	padding-top: 42px;
+	padding-left: 42px;
+}
+
+.tc-tiddlyflex-sidebar-hide {
+	position: absolute;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+	width: 100vw;
+	height: 100vh;
+	background: 0 0;
+	visibility: hidden;
+	z-index: 1000;
+	cursor: pointer;
+	-webkit-transition: background {{$:/config/AnimationDuration}}ms {{$:/config/AnimationDuration}}ms, visibility 0s calc(2 * {{$:/config/AnimationDuration}}ms);
+	transition: background {{$:/config/AnimationDuration}}ms {{$:/config/AnimationDuration}}ms, visibility 0s calc(2 * {{$:/config/AnimationDuration}}ms);
+}
+
+/******************/
+/* ACTIVE COLUMNS */
+/******************/
+
+.tc-tiddlyflex-story-river-active {
+	background: repeating-linear-gradient(
+		to right,
+		<<colour page-background>>,
+		<<colour page-background>> 10px,
+		<<colour tiddler-background>> 10px,
+		<<colour tiddler-background>> 20px
+	);
+}
+
+.tc-tiddlyflex-activate-column {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 100%;
+	cursor: default;
+	background-color: transparent;
+	-webkit-tap-highlight-color: transparent;
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+/*************/
+/* DROPZONES */
+/*************/
+
+div[class^="tc-tiddlyflex-dropzone-"] {
+	min-height: 100%;
+	position: relative;
+}
+
+div[class^="tc-tiddlyflex-dropzone-"].tc-dragover:before {
+	z-index: 999;
+	display: block;
+	position: sticky;
+	top: 0;
+	left: 0;
+	right: 0;
+	background: <<colour dropzone-background>>;
+	text-align: center;
+	content: "<<lingo DropMessage>>";
+}
\ No newline at end of file
diff --git a/TiddlyFlex/css/narrow.tid b/TiddlyFlex/css/narrow.tid
new file mode 100644
index 0000000..ad8fc45
--- /dev/null
+++ b/TiddlyFlex/css/narrow.tid
@@ -0,0 +1,51 @@
+title: $:/plugins/BTC/TiddlyFlex/styles/narrow
+tags: $:/tags/Stylesheet
+
+@media (max-width: 800px) {
+
+	.tc-tiddlyflex-main {
+		overflow-x: hidden;
+	}
+
+	.tc-tiddlyflex-sidebar {
+		position: fixed;
+		top:0;
+		right: 0;
+		bottom: 0;
+		width: 90%;
+		z-index: 1001;
+		background-color: <<colour page-background>>;
+		transform: translate3d(0,0,0);
+		transition: transform {{$:/config/AnimationDuration}}ms;
+	}
+
+	<%if [{$:/state/sidebar}match[no]] %>
+
+		.tc-tiddlyflex-sidebar {
+			transform: translate3d(100%,0,0);
+		}
+
+	<% endif %>
+
+	.tc-tiddlyflex-story-river-container-inner {
+		overflow-x: scroll;
+		width: 100vw;
+		scroll-behavior: smooth;
+		scroll-snap-type: x mandatory;
+	}
+
+	.tc-tiddlyflex-story-river-wrapper {
+		width: 100vw;
+		flex-basis: 100vw;
+		scroll-snap-align: start;
+		overflow: hidden;
+	}
+
+	.tc-tiddlyflex-sidebar-hide.tc-tiddlyflex-sidebar-shown {
+		visibility: visible;
+		background: rgba(0,0,0,.6);
+		-webkit-transition: background {{$:/config/AnimationDuration}}ms 0s;
+		transition: background {{$:/config/AnimationDuration}}ms 0s;
+	}
+
+}
\ No newline at end of file
diff --git a/TiddlyFlex/css/scroll-margins.tid b/TiddlyFlex/css/scroll-margins.tid
new file mode 100644
index 0000000..ed37f5a
--- /dev/null
+++ b/TiddlyFlex/css/scroll-margins.tid
@@ -0,0 +1,50 @@
+title: $:/plugins/BTC/TiddlyFlex/styles/scroll-margins
+tags: $:/tags/Stylesheet
+
+\define tiddlyflex-scroll-margin-top-story-river-padding()
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
+
+.tc-tiddlyflex-story-river-$(column)$ .tc-tiddlyflex-story-river-inner > [data-tiddler-title="$(cssEscapedTitle)$"].tc-tiddler-view-frame, .tc-tiddlyflex-story-river-$(column)$ .tc-tiddlyflex-story-river-inner > [data-tiddler-title="$(cssEscapedTitle)$"].tc-tiddler-edit-frame {
+	scroll-margin-top: {{$:/config/tiddlyflex/story-river/padding}};
+	scroll-margin-left: {{$:/config/tiddlyflex/story-river/padding}};
+}
+
+\end
+
+\define tiddlyflex-scroll-margin-top()
+\rules only filteredtranscludeinline transcludeinline macrodef macrocallinline macrocallblock
+
+.tc-tiddlyflex-story-river-$(column)$ .tc-tiddlyflex-story-river-inner > [data-tiddler-title="$(cssEscapedTitle)$"].tc-tiddler-view-frame, .tc-tiddlyflex-story-river-$(column)$ .tc-tiddlyflex-story-river-inner > [data-tiddler-title="$(cssEscapedTitle)$"].tc-tiddler-edit-frame {
+	scroll-margin-top: {{{ [{$:/config/tiddlyflex/story-river/tiddler/margin-bottom}compare:number:lteq{$:/config/tiddlyflex/story-river/padding}] ~[{$:/config/tiddlyflex/story-river/padding}] }}};
+	scroll-margin-left: {{$:/config/tiddlyflex/story-river/padding}};
+}
+
+\end
+
+<$list filter="[list[$:/columns]] ~1" variable="column">
+
+<$set name="storyList" value={{{ [[$:/StoryList-]addsuffix<column>] }}}>
+
+<$list filter="[list<storyList>nth[1]]" variable="tiddler">
+
+<$set name="cssEscapedTitle" value={{{ [<tiddler>escapecss[]] }}}>
+
+<<tiddlyflex-scroll-margin-top-story-river-padding>>
+
+</$set>
+
+</$list>
+
+<$list filter="[list<storyList>] -[list<storyList>nth[1]]" variable="tiddler">
+
+<$set name="cssEscapedTitle" value={{{ [<tiddler>escapecss[]] }}}>
+
+<<tiddlyflex-scroll-margin-top>>
+
+</$set>
+
+</$list>
+
+</$set>
+
+</$list>
\ No newline at end of file
diff --git a/TiddlyFlex/css/z-indexes.tid b/TiddlyFlex/css/z-indexes.tid
new file mode 100644
index 0000000..30db97c
--- /dev/null
+++ b/TiddlyFlex/css/z-indexes.tid
@@ -0,0 +1,23 @@
+title: $:/plugins/BTC/TiddlyFlex/styles/z-indexes
+tags: $:/tags/Stylesheet
+
+\define tiddlyflex-tiddler-z-indexes()
+
+<$list filter="[range<storyListCount>]">
+`.tc-tiddlyflex-story-river-`$(column)$ `.tc-story-river-flex-inner > .tc-tiddler-view-frame:nth-child(100n+`<$text text=<<currentTiddler>>/>`) {
+z-index: `<$text text={{{ [<storyListCount>add[501]subtract<currentTiddler>] }}}/>`;
+}
+`
+</$list>
+
+\end
+
+<$list filter="[list[$:/columns]] ~1" variable="column">
+
+<$let storyList={{{ [[$:/StoryList-]addsuffix<column>] }}} storyListCount={{{ [list<storyList>count[]] }}}>
+
+<<tiddlyflex-tiddler-z-indexes>>
+
+</$let>
+
+</$list>
\ No newline at end of file
diff --git a/TiddlyFlex/files/modules/utils/dom/scroller.js b/TiddlyFlex/files/modules/utils/dom/scroller.js
new file mode 100644
index 0000000..2d229a6
--- /dev/null
+++ b/TiddlyFlex/files/modules/utils/dom/scroller.js
@@ -0,0 +1,97 @@
+/*\
+title: $:/core/modules/utils/dom/scroller.js
+type: application/javascript
+module-type: utils
+
+Module that creates a $tw.utils.Scroller object prototype that manages scrolling in the browser
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+/*
+Event handler for when the `tm-scroll` event hits the document body
+*/
+var PageScroller = function() {
+	this.idRequestFrame = null;
+	this.requestAnimationFrame = window.requestAnimationFrame ||
+		window.webkitRequestAnimationFrame ||
+		window.mozRequestAnimationFrame ||
+		function(callback) {
+			return window.setTimeout(callback, 1000/60);
+		};
+	this.cancelAnimationFrame = window.cancelAnimationFrame ||
+		window.webkitCancelAnimationFrame ||
+		window.webkitCancelRequestAnimationFrame ||
+		window.mozCancelAnimationFrame ||
+		window.mozCancelRequestAnimationFrame ||
+		function(id) {
+			window.clearTimeout(id);
+		};
+};
+
+PageScroller.prototype.isScrolling = function() {
+	return this.idRequestFrame !== null;
+}
+
+PageScroller.prototype.cancelScroll = function(srcWindow) {
+	if(this.idRequestFrame) {
+		this.cancelAnimationFrame.call(srcWindow,this.idRequestFrame);
+		this.idRequestFrame = null;
+	}
+};
+
+/*
+Handle an event
+*/
+PageScroller.prototype.handleEvent = function(event) {
+	if(event.type === "tm-scroll") {
+		var options = {};
+		if($tw.utils.hop(event.paramObject,"animationDuration")) {
+			options.animationDuration = event.paramObject.animationDuration;
+		}
+		if(event.paramObject && event.paramObject.selector) {
+			this.scrollSelectorIntoView(null,event.paramObject.selector,null,options);
+		} else {
+			this.scrollIntoView(event.target,null,options);
+		}
+		return false; // Event was handled
+	}
+	return true;
+};
+
+/*
+Handle a scroll event hitting the page document
+*/
+PageScroller.prototype.scrollIntoView = function(element,callback,options) {
+	var self = this,
+		duration = $tw.utils.hop(options,"animationDuration") ? parseInt(options.animationDuration) : $tw.utils.getAnimationDuration(),
+		srcWindow = element ? element.ownerDocument.defaultView : window;
+	try {
+		$tw.utils.addClass(element,"tc-navigating");
+		var scrollIntoView = function() {
+			element.scrollIntoView({block: "start", inline: "start"});
+		};
+		this.requestAnimationFrame.call(srcWindow,scrollIntoView);
+		setTimeout(function() {
+			$tw.utils.removeClass(element,"tc-navigating");
+		},duration);
+	} catch(e) {
+		console.log(e);
+	}
+};
+
+PageScroller.prototype.scrollSelectorIntoView = function(baseElement,selector,callback,options) {
+	baseElement = baseElement || document;
+	var element = $tw.utils.querySelectorSafe(selector,baseElement);
+	if(element) {
+		this.scrollIntoView(element,callback,options);
+	}
+};
+
+exports.PageScroller = PageScroller;
+
+})();
diff --git a/TiddlyFlex/files/modules/widgets/subclasses/navigator.js b/TiddlyFlex/files/modules/widgets/subclasses/navigator.js
new file mode 100644
index 0000000..e904e44
--- /dev/null
+++ b/TiddlyFlex/files/modules/widgets/subclasses/navigator.js
@@ -0,0 +1,73 @@
+/*\
+title: $:/plugins/BTC/TiddlyFlex/modules/widgets/subclasses/navigator.js
+type: application/javascript
+module-type: widget-subclass
+
+Widget base class
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+exports.baseClass = "navigator"; // Extend the <$checkbox> widget
+
+exports.constructor = function(parseTreeNode,options) {
+	this.initialise(parseTreeNode,options);
+};
+
+exports.prototype = {};
+
+exports.prototype.handleNavigateEvent = function(event) {
+	event = $tw.hooks.invokeHook("th-navigating",event);
+	if(event.navigateTo || (event.paramObject && event.paramObject.navigateTo)) {
+		this.addToStory(event.paramObject && event.paramObject.navigateTo ? event.paramObject.navigateTo : event.navigateTo,event.paramObject && event.paramObject.navigateFromTitle ? event.paramObject.navigateFromTitle : event.navigateFromTitle);
+		if(!event.navigateSuppressNavigation && !(event.paramObject ? event.paramObject.navigateSuppressNavigation : true)) {
+			this.addToHistory(event.paramObject && event.paramObject.navigateTo ? event.paramObject.navigateTo : event.navigateTo,event.paramObject && event.paramObject.navigateFromClientRect ? event.paramObject.navigateFromClientRect : event.navigateFromClientRect);
+		}
+	}
+	return false;
+};
+
+// Place a tiddler in edit mode
+exports.prototype.handleEditTiddlerEvent = function(event) {
+	var editTiddler = $tw.hooks.invokeHook("th-editing-tiddler",event),
+	    win = event.event && event.event.view ? event.event.view : window;
+	if(!editTiddler) {
+		return false;
+	}
+	var self = this;
+	function isUnmodifiedShadow(title) {
+		return self.wiki.isShadowTiddler(title) && !self.wiki.tiddlerExists(title);
+	}
+	function confirmEditShadow(title) {
+		return win.confirm($tw.language.getString(
+			"ConfirmEditShadowTiddler",
+			{variables:
+				{title: title}
+			}
+		));
+	}
+	var title = event.param || event.tiddlerTitle;
+	if(isUnmodifiedShadow(title) && !confirmEditShadow(title)) {
+		return false;
+	}
+	// Replace the specified tiddler with a draft in edit mode
+	var draftTiddler = this.makeDraftTiddler(title);
+	// Update the story and history if required
+	if(!event.paramObject || event.paramObject.suppressNavigation !== "yes") {
+		var draftTitle = draftTiddler.fields.title,
+			storyList = this.getStoryList();
+		this.removeTitleFromStory(storyList,draftTitle);
+		this.replaceFirstTitleInStory(storyList,title,draftTitle);
+		if(!(event.paramObject && (event.paramObject.suppressNavigation === "true"))) {
+			this.addToHistory(draftTitle,event.navigateFromClientRect);
+		}
+		this.saveStoryList(storyList);
+		return false;
+	}
+};
+
+})();
\ No newline at end of file
diff --git a/TiddlyFlex/files/tiddlywiki.files b/TiddlyFlex/files/tiddlywiki.files
new file mode 100644
index 0000000..b541dcc
--- /dev/null
+++ b/TiddlyFlex/files/tiddlywiki.files
@@ -0,0 +1,19 @@
+{
+	"tiddlers": [
+		{
+			"file": "modules/widgets/subclasses/navigator.js",
+			"fields": {
+				"type": "application/javascript",
+				"title": "$:/plugins/BTC/TiddlyFlex/modules/widgets/subclasses/navigator.js",
+				"module-type": "widget-subclass"
+			}
+		},{
+			"file": "modules/utils/dom/scroller.js",
+			"fields": {
+				"type": "application/javascript",
+				"title": "$:/core/modules/utils/dom/scroller.js",
+				"module-type": "utils"
+			}
+		}
+	]
+}
\ No newline at end of file
diff --git a/TiddlyFlex/global/globals.tid b/TiddlyFlex/global/globals.tid
new file mode 100644
index 0000000..2502161
--- /dev/null
+++ b/TiddlyFlex/global/globals.tid
@@ -0,0 +1,67 @@
+title: $:/plugins/BTC/TiddlyFlex/globals
+tags: $:/tags/Global
+
+\define tiddlyflex-navigate-story-river-actions-selector()
+.tc-tiddlyflex-story-river-$(column)$ [data-tiddler-title="$(navigateToCSSEscaped)$"]
+\end
+\function tiddlyflex-suppress-navigation() [<modifier>match[ctrl]then[true]] [<modifier>match[meta]then[true]] +[match[true]] +[limit[1]]
+\procedure tiddlyflex-navigate-story-river-actions-navigate()
+<$action-sendmessage $message="tm-navigate" navigateTo=<<event-navigateTo>> navigateFromTitle=<<event-navigateFromTitle>> navigateSuppressNavigation={{{ [function[tiddlyflex-suppress-navigation]] }}}/>
+\end
+\procedure tiddlyflex-navigate-story-river-actions-inner-inner()
+<$let storyList={{{ [[$:/StoryList-]addsuffix<column>] }}} historyList={{{ [[$:/HistoryList-]addsuffix<column>] }}}>
+	<%if [[$:/columns]!contains<column>] %>
+		<$action-listops $tiddler="$:/columns" $subfilter="[<column>]"/>
+	<% endif %>
+	<$navigator story=<<storyList>> history=<<historyList>> openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
+		<<tiddlyflex-navigate-story-river-actions-navigate>>
+	</$navigator>
+</$let>
+\end
+\procedure tiddlyflex-navigate-story-river-actions-inner()
+<%if [<modifier>match[shift]] %>
+	<$set name="column" value={{{ [function[tiddlyflex-current-column]add[1]] }}}>
+		<<tiddlyflex-navigate-story-river-actions-inner-inner>>
+	</$set>
+<% elseif [<modifier>match[alt]] %>
+	<$set name="column" value={{{ [function[tiddlyflex-current-column]!match[1]subtract[1]] ~1 }}}>
+		<<tiddlyflex-navigate-story-river-actions-inner-inner>>
+	</$set>
+<% endif %>
+\end
+\procedure tiddlyflex-navigate-story-river-actions()
+\function edit-missing-tiddler() [{$:/config/tiddlyflex/navigation/edit-missing-tiddlers}match[yes]then<event-navigateTo>!is[shadow]is[missing]]
+\function tiddlyflex-no-shift-alt() [<modifier>!match[shift]then<modifier>!match[alt]]
+<%if [list[$:/columns]] ~1 +[addprefix[$:/StoryList-]] +[enlist-input[]] +[contains<event-navigateTo>] %>
+	<%if [function[tiddlyflex-no-shift-alt]] %>
+		<$list filter="[list[$:/columns]] ~1" variable="column">
+			<$let storyList={{{ [[$:/StoryList-]addsuffix<column>] }}} historyList={{{ [[$:/HistoryList-]addsuffix<column>] }}} navigateToCSSEscaped={{{ [<event-navigateTo>escapecss[]] }}}>
+				<%if [<storyList>contains<event-navigateTo>] %>
+					<%if [<modifier>!match[ctrl]then<modifier>!match[meta]] %>
+						<$action-sendmessage $message="tm-scroll" selector=<<tiddlyflex-navigate-story-river-actions-selector>>/>
+					<% endif %>
+					<%if [function[edit-missing-tiddler]] %>
+						<$navigator story=<<storyList>> history=<<historyList>> openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
+							<<tiddlyflex-navigate-story-river-actions-navigate>>
+							<$action-sendmessage $message="tm-edit-tiddler" $param=<<event-navigateTo>> suppressNavigation={{{ [function[tiddlyflex-suppress-navigation]] }}}/>
+						</$navigator>
+					<% endif %>
+				<% endif %>
+			</$let>
+		</$list>
+	<% else %>
+		<<tiddlyflex-navigate-story-river-actions-inner>>
+	<% endif %>
+<% else %>
+	<%if [function[tiddlyflex-no-shift-alt]] %>
+		<%if [function[edit-missing-tiddler]] %>
+			<<tiddlyflex-navigate-story-river-actions-navigate>>
+			<$action-sendmessage $message="tm-edit-tiddler" $param=<<event-navigateTo>> suppressNavigation={{{ [function[tiddlyflex-suppress-navigation]] }}}/>
+		<% else %>
+			<<tiddlyflex-navigate-story-river-actions-navigate>>
+		<% endif %>
+	<% else %>
+		<<tiddlyflex-navigate-story-river-actions-inner>>
+	<% endif %>
+<% endif %>
+\end
\ No newline at end of file
diff --git a/TiddlyFlex/license.tid b/TiddlyFlex/license.tid
new file mode 100644
index 0000000..39edeaf
--- /dev/null
+++ b/TiddlyFlex/license.tid
@@ -0,0 +1,29 @@
+title: $:/plugins/BTC/TiddlyFlex/license
+
+!!! This plugin is distributed under MIT License
+
+```
+
+MIT License
+
+Copyright (c) 2024 Simon Huber
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+```
\ No newline at end of file
diff --git a/TiddlyFlex/plugin.info b/TiddlyFlex/plugin.info
new file mode 100644
index 0000000..c23351f
--- /dev/null
+++ b/TiddlyFlex/plugin.info
@@ -0,0 +1,7 @@
+{
+	"title": "$:/plugins/BTC/TiddlyFlex",
+	"description": "A Flexbox Layout for TiddlyWiki5",
+	"author": "Simon Huber",
+	"version": "0.0.1",
+	"list": "readme license"
+}
\ No newline at end of file
diff --git a/TiddlyFlex/readme.tid b/TiddlyFlex/readme.tid
new file mode 100644
index 0000000..a34de2d
--- /dev/null
+++ b/TiddlyFlex/readme.tid
@@ -0,0 +1,5 @@
+title: $:/plugins/BTC/TiddlyFlex/readme
+
+!!! ~TiddlyFlex
+
+This ''plugin'' provides an alternative [ext[Flexbox|https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox]] Layout for ~TiddlyWiki5
\ No newline at end of file
diff --git a/TiddlyFlex/ui/Layout.tid b/TiddlyFlex/ui/Layout.tid
new file mode 100644
index 0000000..924ae12
--- /dev/null
+++ b/TiddlyFlex/ui/Layout.tid
@@ -0,0 +1,76 @@
+title: $:/plugins/BTC/TiddlyFlex/ui/Layout
+tags: $:/tags/Layout
+description: A Flexbox Layout
+name: ~TiddlyFlex
+code-body: yes
+
+\whitespace trim
+\import [subfilter{$:/core/config/GlobalImportFilter}]
+<$vars
+	tv-config-toolbar-icons={{$:/config/Toolbar/Icons}}
+	tv-config-toolbar-text={{$:/config/Toolbar/Text}}
+	tv-config-toolbar-class={{$:/config/Toolbar/ButtonClass}}
+	tv-enable-drag-and-drop={{$:/config/DragAndDrop/Enable}}
+	tv-show-missing-links={{$:/config/MissingLinks}}
+	storyviewTitle={{$:/view}}
+	languageTitle={{{ [{$:/language}get[name]] }}}>
+	<div class={{{ [all[shadows+tiddlers]tag[$:/tags/ClassFilters/PageTemplate/TiddlyFlex]!is[draft]] :map:flat[subfilter{!!text}] tc-page-container tc-tiddlyflex-container [[tc-page-view-]addsuffix<storyviewTitle>] [[tc-language-]addsuffix<languageTitle>] [{$:/state/sidebar}match[yes]then[tc-sidebar-shown]] :and[unique[]join[ ]] }}} >
+		<$eventcatcher selector=".tc-tiddlyflex-sidebar-shown" $click="""<$action-setfield $tiddler="$:/state/sidebar" text="no"/>""" class="tc-tiddlyflex-sidebar-shown-eventcatcher">
+			<div class={{{ [{$:/state/sidebar}match[yes]then[tc-tiddlyflex-sidebar-hide tc-btn-invisible tc-tiddlyflex-sidebar-shown]else[tc-tiddlyflex-sidebar-hide tc-btn-invisible tc-tiddlyflex-sidebar-hidden]] }}}/>
+		</$eventcatcher>
+		<$navigator story={{{ [[$:/StoryList-]addsuffix{$:/columns!!current-column}!match[$:/StoryList-]] ~$:/StoryList-1 }}} history={{{ [[$:/HistoryList-]addsuffix{$:/columns!!current-column}!match[$:/HistoryList-]] ~$:/HistoryList-1 }}}>
+			<$messagecatcher $tm-navigate=<<tiddlyflex-navigate-story-river-actions>>>
+				<div class="tc-tiddlyflex-header">
+					<$list filter="[all[shadows+tiddlers]tag[$:/tags/TopToolbar]!is[draft]]" variable="listItem" storyview="pop">
+						<$transclude tiddler=<<listItem>>/>
+					</$list>
+				</div>
+			</$messagecatcher>
+		</$navigator>
+		<main class="tc-tiddlyflex-main">
+			<div class="tc-tiddlyflex-story-river-container">
+				<div class="tc-tiddlyflex-story-river-container-inner">
+					<$list filter="[list[$:/columns]] ~1" variable="column" storyview="pop">
+						<$set name="transclusion" value=<<column>>>
+							<div class="tc-tiddlyflex-story-river-wrapper">
+								<div class="tc-tiddlyflex-story-river-header">
+									<$set name="aboveStoryHeaderTag" value={{{ [[$:/tags/AboveStoryHeader-]addsuffix<column>] }}}>
+										<$list filter="[all[shadows+tiddlers]tag<aboveStoryHeaderTag>!is[draft]]" variable="listItem" storyview="pop">
+											<$transclude tiddler=<<listItem>>/>
+										</$list>
+									</$set>
+								</div>
+								<$transclude tiddler="$:/plugins/BTC/TiddlyFlex/ui/Templates/story"/>
+								<div class="tc-tiddlyflex-story-river-footer">
+									<$set name="belowStoryFooterTag" value={{{ [[$:/tags/BelowStoryFooter-]addsuffix<column>] }}}>
+										<$list filter="[all[shadows+tiddlers]tag<belowStoryFooterTag>!is[draft]]" variable="listItem" storyview="pop">
+											<$transclude tiddler=<<listItem>>/>
+										</$list>
+									</$set>
+								</div>
+							</div>
+						</$set>
+					</$list>
+				</div>
+			</div>
+			<div class="tc-tiddlyflex-sidebar">
+				<div class="tc-tiddlyflex-sidebar-container">
+					<div class="tc-tiddlyflex-sidebar-container-inner">
+						<$navigator story={{{ [[$:/StoryList-]addsuffix{$:/columns!!current-column}!match[$:/StoryList-]] ~$:/StoryList-1 }}} history={{{ [[$:/HistoryList-]addsuffix{$:/columns!!current-column}!match[$:/HistoryList-]] ~$:/HistoryList-1 }}}>
+							{{$:/plugins/BTC/TiddlyFlex/ui/Templates/sidebar}}
+						</$navigator>
+					</div>
+				</div>
+			</div>
+		</main>
+		<$navigator story={{{ [[$:/StoryList-]addsuffix{$:/columns!!current-column}!match[$:/StoryList-]] ~$:/StoryList-1 }}} history={{{ [[$:/HistoryList-]addsuffix{$:/columns!!current-column}!match[$:/HistoryList-]] ~$:/HistoryList-1 }}}>
+			<$messagecatcher $tm-navigate=<<tiddlyflex-navigate-story-river-actions>>>
+				<div class="tc-tiddlyflex-footer">
+					<$list filter="[all[shadows+tiddlers]tag[$:/tags/BottomToolbar]!is[draft]]" variable="listItem" storyview="pop">
+						<$transclude tiddler=<<listItem>>/>
+					</$list>
+				</div>
+			</$messagecatcher>
+		</$navigator>
+	</div>
+</$vars>
\ No newline at end of file
diff --git a/TiddlyFlex/ui/Templates/sidebar.tid b/TiddlyFlex/ui/Templates/sidebar.tid
new file mode 100644
index 0000000..4715540
--- /dev/null
+++ b/TiddlyFlex/ui/Templates/sidebar.tid
@@ -0,0 +1,33 @@
+title: $:/plugins/BTC/TiddlyFlex/ui/Templates/sidebar
+code-body: yes
+
+\whitespace trim
+\define config-title()
+$:/config/SideBarSegments/Visibility/$(listItem)$
+\end
+\function tiddlyflex-current-column() [{$:/columns!!current-column}]
+<div class="tc-tiddlyflex-sidebar-scrollable">
+
+	<$messagecatcher $tm-navigate=<<tiddlyflex-navigate-story-river-actions>>>
+
+		<div class="tc-sidebar-header">
+
+			<$reveal state="$:/state/sidebar" type="match" text="yes" default="yes" animate="yes">
+
+				<$list filter="[all[shadows+tiddlers]tag[$:/tags/SideBarSegment]!has[draft.of]]" variable="listItem">
+
+					<$reveal type="nomatch" state=<<config-title>> text="hide"  tag="div">
+
+						<$transclude tiddler=<<listItem>> mode="block"/>
+
+					</$reveal>
+
+				</$list>
+
+			</$reveal>
+
+		</div>
+
+	</$messagecatcher>
+
+</div>
\ No newline at end of file
diff --git a/TiddlyFlex/ui/Templates/story.tid b/TiddlyFlex/ui/Templates/story.tid
new file mode 100644
index 0000000..282201b
--- /dev/null
+++ b/TiddlyFlex/ui/Templates/story.tid
@@ -0,0 +1,69 @@
+title: $:/plugins/BTC/TiddlyFlex/ui/Templates/story
+code-body: yes
+
+\whitespace trim
+\function tiddlyflex-current-column() [<column>]
+\procedure tiddlyflex-activate-column()
+<%if [{$:/columns!!current-column}!match<column>] %>
+	<$action-setfield $tiddler="$:/columns" current-column=<<column>>/>
+<% endif %>
+\end
+<div class={{{ [[tc-tiddlyflex-story-river-wrapper-inner ]addsuffix[tc-tiddlyflex-story-river-]addsuffix<column>] [{$:/columns!!current-column}match<column>then[tc-tiddlyflex-story-river-active]] [{$:/columns!!current-column}is[blank]then<column>match[1]then[tc-tiddlyflex-story-river-active]] :and[unique[]join[ ]] }}}>
+
+	<$navigator story={{{ [[$:/StoryList-]addsuffix<column>] }}} history={{{ [[$:/HistoryList-]addsuffix<column>] }}} openLinkFromInsideRiver={{$:/config/Navigation/openLinkFromInsideRiver}} openLinkFromOutsideRiver={{$:/config/Navigation/openLinkFromOutsideRiver}} relinkOnRename={{$:/config/RelinkOnRename}}>
+
+		<$dropzone enable=<<tv-enable-drag-and-drop>> class={{{ [<column>!is[blank]addprefix[tc-tiddlyflex-dropzone-]] ~tc-tiddlyflex-dropzone-1 }}} importTitle={{{ [[$:/Import-]addsuffix<column>] }}}>
+
+			<$eventcatcher selector=".tc-tiddlyflex-activate-column" $click=<<tiddlyflex-activate-column>> class="tc-tiddlyflex-active-column-wrapper">
+
+				<a class="tc-btn-invisible tc-tiddlyflex-activate-column"/>
+
+			</$eventcatcher>
+
+			<section class="tc-tiddlyflex-story-river" role="main">
+
+				<$messagecatcher $tm-navigate=<<tiddlyflex-navigate-story-river-actions>>>
+
+					<section class="story-backdrop">
+
+						<$set name="aboveStoryTag" value={{{ [[$:/tags/AboveStory-]addsuffix<column>] }}}>
+
+							<$list filter="[all[shadows+tiddlers]tag<aboveStoryTag>!is[draft]]">
+
+								<$transclude/>
+
+							</$list>
+
+						</$set>
+
+					</section>
+
+					<section class="tc-tiddlyflex-story-river-inner">
+
+						<$list filter="[list<tv-story-list>]" history=<<tv-history-list>> template="$:/core/ui/StoryTiddlerTemplate" storyview={{$:/view}}/>
+
+					</section>
+
+					<section class="story-frontdrop">
+
+						<$set name="belowStoryTag" value={{{ [[$:/tags/BelowStory-]addsuffix<column>] }}}>
+
+							<$list filter="[all[shadows+tiddlers]tag<belowStoryTag>!has[draft.of]]">
+
+								<$transclude/>
+
+							</$list>
+
+						</$set>
+
+					</section>
+
+				</$messagecatcher>
+
+			</section>
+
+		</$dropzone>
+
+	</$navigator>
+
+</div>
\ No newline at end of file