feat: Update drag page and other small things

- Add parameter to NewDiv class
- Add instance with content to drag page
- Drag page now also uses frame template
- Use macro for footer in explorer

source/code/_ui.js

@@ -1,17 +1,18 @@
 // Creates a div element which is draggable
 class NewDiv {
-  constructor(x, y, width, height, backgroundColor) {
+  constructor(x, y, width, height, backgroundColor, content) {
     this.x = x;
     this.y = y;
     this.width = width;
     this.height = height;
     this.backgroundColor = backgroundColor;
     this.element = null;
+    this.content = content;
   }
 
   // Create the div element
   createDiv() {
-    this.element = document.createElement('div');
+    this.element = this._content;
     this.element.style.position = 'absolute';
     this.element.style.left = `${this.x}px`;
     this.element.style.top = `${this.y}px`;
@@ -93,6 +94,19 @@ class NewDiv {
     loadData();
   }
 
+  // FIXME: this.element wird von appendToFrame() verwendet
+  get content() {
+    return this._content = this.content;
+  }
+
+  set content(value) {
+    if (!value) {
+      value = document.createElement('div');
+    }
+
+    this._content = value;
+  }
+
   // Append the div to the space
   appendToFrame(space) {
     this.element.id = `newDiv${space.children.length}`;

source/screens/demo/examples/intro.njk

@@ -5,9 +5,8 @@ tags:
 ---
 
 {% set pageId = "init" %}
-{% set pageClass = "html_ui" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 {% block title %}
 	{{ title }}

source/screens/demo/examples/ui/cli.njk

@@ -0,0 +1,62 @@
+---
+title: CLI
+tags:
+	- ui
+---
+{% set pageId = page.fileSlug %}
+{% set bodyClass = "body_cli" %}
+
+{% extends "hippie/_app_frame.njk" %}
+
+{% block body %}
+	<div id="cli">
+		<div id="history">
+			<pre>Previous prompt</pre>
+		</div>
+		<div id="line">
+			<textarea name="prefix" id="prefix" rows="1" cols="1" readonly>&gt;</textarea>
+			<textarea name="prompt" id="prompt" rows="1" autofocus></textarea>
+		</div>
+	</div>
+{% endblock %}
+
+{%- block script %}
+	{{ super() }}
+	<script>
+		function resizeTextArea(textarea) {
+			const {style, value} = textarea;
+
+			style.height = style.minHeight = 'auto';
+			style.minHeight = `${Math.min(textarea.scrollHeight + 4, parseInt(textarea.style.maxHeight))}px`;
+			style.height = `${textarea.scrollHeight}px`;
+		}
+
+		const textarea = document.getElementById('prompt');
+
+		document
+			.body
+			.addEventListener('click', () => {
+				textarea.focus();
+			});
+
+		textarea.addEventListener('input', () => {
+			resizeTextArea(textarea);
+		});
+
+		window.addEventListener("keydown", (event) => {
+			if (event.key === 'Enter' && !event.shiftKey) {
+				event.preventDefault();
+
+				const p = document.createElement("pre");
+
+				p.textContent = event.target.value;
+				document
+					.getElementById("history")
+					.appendChild(p);
+				// window.scrollTo(0, document.body.scrollHeight);
+
+				event.target.value = '';
+			}
+		});
+	</script>
+{% endblock %}

source/screens/demo/examples/ui/drag.njk

@@ -4,28 +4,23 @@ tags:
   - ui
 ---
 {% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_ui" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app_frame.njk" %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-  {{ super() }}
-  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-  {{ super() }}
-{% endblock %}
 
 {% block body %}
   <header class="io pos_fix pin_top pin_right pin_left">
     <button data-action="add">Add</button>
   </header>
   <div id="space"></div>
+  <div>
+    <div id="test">
+      <div class="body_frame">
+        {{ io.frameHeader('title-bar') }}
+        <main></main>
+        {{ io.frameFooter('mode-bar') }}
+      </div>
+    </div>
+  </div>
 {% endblock %}
 
 {%- block script %}
@@ -34,6 +29,7 @@ tags:
     // Get the space element
     const space = document.getElementById('space');
     const add = document.querySelector('[data-action=add]');
+    const test = document.getElementById('test');
 
     // Add event listener to the add space button
     add.addEventListener('click', () => {
@@ -43,8 +39,12 @@ tags:
     });
 
     // Create a new NewDiv instance
-    const newDiv = new NewDiv(100, 100, 800, 600, '#000');
+    const newDiv = new NewDiv(100, 100, 200, 200, '#000');
     newDiv.createDiv();
     newDiv.appendToFrame(space);
+
+    const explorer = new NewDiv(256, 128, 800, 600, '#fff', test);
+    explorer.createDiv();
+    explorer.appendToFrame(space);
   </script>
 {% endblock %}

source/screens/demo/examples/ui/explorer.njk

@@ -0,0 +1,156 @@
+---
+title: GUI explorer
+tags:
+	- ui
+---
+{% set pageId = page.fileSlug %}
+
+{% extends "hippie/_app_frame.njk" %}
+
+{% block body %}
+	{{ io.frameHeader('title-bar') }}
+	<main class="io">
+		<aside class="io">
+			<nav>
+				<div>location-pane</div>
+				<ul class="vertical">
+					<li>
+						<a class="a_button" href="">
+							<span>Start/Home</span>
+							<i class="bi bi-pin-fill"></i>
+						</a>
+					</li>
+					<li>
+						<a class="a_button" href="">
+							<span>System</span>
+							<i class="bi bi-pin-fill"></i>
+						</a>
+					</li>
+				</ul>
+			</nav>
+			<hr>
+			<nav>
+				<ul class="vertical">
+					<li>
+						<a class="a_button" href="">
+							<span>💽 disc link</span>
+						</a>
+					</li>
+					<li>
+						<a class="a_button" href="">
+							<span>📁 folder link</span>
+						</a>
+					</li>
+					<li>
+						<a class="a_button" href="">
+							<span>🔗 location link</span>
+						</a>
+					</li>
+				</ul>
+			</nav>
+		</aside>
+		<section>
+			<header class="io">
+				<nav>
+					<button title="back">
+						<i class="bi bi-caret-left"></i>
+					</button>
+					<button title="up">
+						<i class="bi bi-caret-up"></i>
+					</button>
+					<button title="forward">
+						<i class="bi bi-caret-right"></i>
+					</button>
+					<button title="reload">
+						<i class="bi bi-arrow-clockwise"></i>
+					</button>
+					<input placeholder="//" type="text">
+				</nav>
+				<nav>
+					<span>location-bar</span>
+					<hr class="vertical">
+					<button title="search">
+						<i class="bi bi-search"></i>
+					</button>
+					<input placeholder="*" type="text">
+				</nav>
+			</header>
+			<header class="io">
+				<nav>
+					<button title="add">
+						<i class="bi bi-plus-circle"></i>
+					</button>
+					<div class="spacer a"></div>
+					<button title="cut">
+						<i class="bi bi-scissors"></i>
+					</button>
+					<button title="copy">
+						<i class="bi bi-copy"></i>
+					</button>
+					<button title="paste">
+						<i class="bi bi-clipboard-check-fill"></i>
+					</button>
+					<div class="spacer b"></div>
+					<button title="delete">
+						<i class="bi bi-trash"></i>
+					</button>
+				</nav>
+				<hr class="vertical">
+				<nav>
+					<ul>
+						<li>
+							<button title="collapse">
+								<i class="bi bi-arrows-collapse"></i>
+							</button>
+						</li>
+						<li>
+							<button title="expand">
+								<i class="bi bi-arrows-expand-vertical"></i>
+							</button>
+						</li>
+					</ul>
+					<span>options-bar</span>
+				</nav>
+				<nav></nav>
+			</header>
+			<div id="content">
+				<table>
+					<thead>
+						<tr>
+							<th>name</th>
+							<th>date</th>
+							<th>type</th>
+							<th>size</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td>folder</td>
+							<td>YYYY-MM-DD</td>
+							<td>folder</td>
+							<td>4KB</td>
+						</tr>
+						<tr>
+							<td>file</td>
+							<td>YYYY-MM-DD</td>
+							<td>folder</td>
+							<td>1B</td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<footer class="io">
+				<nav>
+					<span>## items</span>
+					<span># selected (size)</span>
+					<span># type(s)</span>
+					<span># shared</span>
+				</nav>
+				<nav>
+					<span>status-bar</span>
+				</nav>
+			</footer>
+		</section>
+	</main>
+	{{ io.frameFooter('mode-bar') }}
+{% endblock %}

source/screens/demo/examples/ui/form.njk

@@ -3,23 +3,10 @@ title: Form
 tags: 
   - ui
 ---
-{% set pageClass = "html_ui" %}
+{% extends "hippie/_app_frame.njk" %}
-{% set bodyClass = "body_ui" %}
-
-{% extends "demo/_app.njk" %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
 
 {% block body %}
+	{{ io.frameHeader('title-bar') }}
 	<header class="io">
 		<h1>Formulare</h1>
 		<button data-action="add">Hinzufügen</button>

source/screens/demo/examples/ui/index.njk

@@ -4,10 +4,7 @@ tags:
   - demoExample
   - index
 ---
-
+{% extends "hippie/_app.njk" %}
-{% set pageClass = "html_ui" %}
-
-{% extends "demo/_app.njk" %}
 {% import "hippie/macros/_placeholder.njk" as ph %}
 
 {% block title %}
@@ -25,7 +22,7 @@ tags:
 {% block body %}
 	<div class="sec_main_center">
 		<nav role="doc-toc">
-			<h1>Inhaltsverzeichnis</h1>
+			<h1>{{ title }}</h1>
 			<ul class="list_link">
 				{%- for ui in collections.ui -%}
 					<li>

source/screens/demo/examples/ui/new.njk

@@ -4,10 +4,9 @@ tags:
   - ui
 ---
 {% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
 {% set bodyClass = "body_new" %}
 
-{% extends "demo/_app.njk" %}
+{% extends "hippie/_app.njk" %}
 {% import "hippie/macros/_header.njk" as header %}
 
 {% block title %}{{ title }}
@@ -24,32 +23,28 @@ tags:
 
 {% block body %}
   {{ header.status(hippie, new) }}
-  <div id="frame">
+  <header class="area menu io">
-    <header class="area menu io">
+    <nav>
-      <nav>
+      <ul>
-        <ul>
+        <li>
-          <li>
+          <a href="" class="a_button">Func 1</a>
-            <a href="" class="a_button">Func 1</a>
+        </li>
-          </li>
+        <li>
-          <li>
+          <a href="" class="a_button">Func 2</a>
-            <a href="" class="a_button">Func 2</a>
+        </li>
-          </li>
+      </ul>
-        </ul>
+    </nav>
-      </nav>
+  </header>
-    </header>
+  <div class="area grid">
-    <div class="area grid">
+    <div class="item">1</div>
-      <div class="item">1</div>
+    <div class="item">2</div>
-      <div class="item">2</div>
+    <div class="item">3</div>
-      <div class="item">3</div>
+    <div class="item">4</div>
-      <div class="item">4</div>
-    </div>
   </div>
 {% endblock %}
 
 {%- block script %}
   {{ super() }}
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-  <script src="{{ pageBase }}js/app.js"></script>
   <script>
     let clock = new Clock('time');
 

source/screens/demo/examples/ui/settings.njk

@@ -1,112 +0,0 @@
----
-title: Settings
-tags:
-	- ui
----
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_setting" %}
-
-{% extends "demo/_app.njk" %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-	{{ super() }}
-	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
-	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-	{{ super() }}
-{% endblock %}
-
-{% block body %}
-	<div id="frame">
-		<header class="io">
-			<button title="menu">
-				<i class="bi bi-three-dots"></i>
-			</button>
-			<span class="span_solo">title-bar</span>
-			<nav>
-				<div class="spacer-a"></div>
-				<button title="minimize">
-					<i class="bi bi-dash"></i>
-				</button>
-				<button title="maximize">
-					<i class="bi bi-fullscreen"></i>
-				</button>
-				<button title="close">
-					<i class="bi bi-x-square"></i>
-				</button>
-			</nav>
-		</header>
-		<main class="io">
-			<aside class="io">
-				options
-				<nav>
-					<ul>
-						<li>setting</li>
-						<li>text</li>
-					</ul>
-					<hr>
-					<ul>
-						<li>
-							<label for="">label</label>
-						</li>
-						<li>
-							<button>button</button>
-						</li>
-					</ul>
-				</nav>
-			</aside>
-			<section>
-				<header class="io">
-					<nav>
-						<button title="search">
-							<i class="bi bi-search"></i>
-						</button>
-						<div class="spacer-b"></div>
-						<button title="cut">
-							<i class="bi bi-scissors"></i>
-						</button>
-						<button title="copy">
-							<i class="bi bi-copy"></i>
-						</button>
-						<button title="paste">
-							<i class="bi bi-clipboard-check-fill"></i>
-						</button>
-					</nav>
-					<hr class="vertical">
-					<nav>
-						<ul>
-							<li>
-								<button title="collapse">
-									<i class="bi bi-arrows-collapse"></i>
-								</button>
-							</li>
-							<li>
-								<button title="expand">
-									<i class="bi bi-arrows-expand-vertical"></i>
-								</button>
-							</li>
-						</ul>
-					</nav>
-					<span class="span_solo">section-bar</span>
-				</header>
-				section</section>
-		</main>
-		<footer class="io">
-			<span class="span_solo">state</span>
-			<div class="spacer-a"></div>
-			<button>action</button>
-		</footer>
-	</div>
-{% endblock %}
-
-{%- block script %}
-	{{ super() }}
-	<script src="{{ pageBase }}js/app.js"></script>
-	<script></script>
-{% endblock %}

source/screens/demo/examples/ui/tui.njk

@@ -0,0 +1,17 @@
+---
+title: TUI
+tags:
+	- ui
+---
+{% set pageId = page.fileSlug %}
+
+{% extends "hippie/_app_frame.njk" %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block body %}
+	{{ io.frameHeader('title-bar') }}
+	<main class="io"></main>
+	{{ io.frameFooter('mode-bar') }}
+{% endblock %}

source/style/hippie-style

@@ -1 +1 @@
-Subproject commit b7ec209761cac635ba8312dbb07bf831ebc32933
+Subproject commit fb1bd808a0eac6b1031d1bf9f68487eb257053ff

source/style/modules/ui/_drag_module.scss

@@ -1,4 +1,8 @@
 #space {
 	position: relative;
 	height: 100%;
+
+	.body_frame {
+		background-color: white;
+	}
 }

source/style/modules/ui/_frame_module.scss

@@ -0,0 +1,134 @@
+@mixin nav-spacer($name, $size, $orientation) {
+	.spacer.#{$name} {
+		width: $size;
+	}
+}
+
+.body_frame {
+	@extend %flex-column;
+
+	background-color: $color_back_basic;
+
+	position: relative;
+	height: 100%;
+
+	header,
+	aside,
+	footer {
+		border: 1px solid transparent;
+	}
+
+	&>header {
+		background-color: rgba(0, 0, 0, .1);
+	}
+
+	main {
+		@extend %flex-row;
+
+		flex: 1;
+
+		// aside {
+		// 	background-color: rgba(255, 255, 255, .1);
+		// }
+
+		section {
+
+			&>header,
+			&>footer {
+				background-color: transparentize($color_back_io, .5);
+
+				&:hover {
+					background-color: $color_back_io;
+				}
+			}
+		}
+
+		section,
+		section>div {
+			flex: 1;
+		}
+
+		section {
+			@extend %flex-column;
+			gap: 0;
+		}
+	}
+}
+
+.body_cli {
+	@extend .body_frame;
+
+	background-color: black;
+}
+
+#cli {
+	@extend %flex-column;
+
+	background-color: black;
+
+	#line {
+		@extend %flex-row;
+	}
+
+	#prompt {
+		flex: 1;
+	}
+
+	pre {
+		margin: .5em 0;
+		color: white;
+	}
+
+	textarea {
+		resize: none;
+		max-height: 128px;
+		margin: $margin_io;
+		border: 0;
+		padding: $space_half;
+		// color: $color_text_io;
+		color: white;
+		// background-color: $color_back_io;
+		background-color: transparent;
+		line-height: 1.2;
+	}
+}
+
+
+
+#content {
+	background-color: $color_back_io;
+
+	&>table {
+		width: 100%;
+		margin: 0;
+		border: 0;
+
+		tr:hover td {
+			background-color: $color_highlight_basic;
+		}
+
+		th {
+			border: 1px solid $color_border_io;
+		}
+
+		td {
+			border-width: 0 1px;
+			border-style: solid;
+			border-color: $color_border_io;
+		}
+	}
+}
+
+
+
+.io {
+	.spacer {
+		margin: 0;
+		border: $border_dotted;
+		padding: 0;
+		opacity: .25;
+	}
+
+	@include nav-spacer('a', $space_double, false);
+	@include nav-spacer('b', $space_small, false);
+}

source/style/modules/ui/_new_module.scss

@@ -2,23 +2,11 @@ $module_top_height: 32px;
 $body_top_space: $module_top_height + $space_basic;
 
 .body_new {
-	@extend .body_ui;
+	@extend %flex-column;
-	
 	padding: $body_top_space $space_basic $space_basic;
 }
 
-#frame {
-	display: grid;
-	height: 100%;
-	// margin: $space_basic;
-	// grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: auto 1fr;
-	gap: $space_basic;
-}
-
 .area {
-	width: 100%;
-	height: 100%;
 	transition: $transition_best;
 
 	&:hover {
@@ -26,15 +14,9 @@ $body_top_space: $module_top_height + $space_basic;
 	}
 }
 
-.menu,
-#top {
-	nav ul {
-		margin: 0;
-	}
-}
-
 .grid {
 	display: grid;
+	flex: 1;
 	// grid-template-rows: repeat(2, 1fr);
 	// grid-template-columns: repeat(2, 1fr);
 	grid-template-areas: "a a";
@@ -92,7 +74,7 @@ $body_top_space: $module_top_height + $space_basic;
 
 	nav ul {
 		display: flex;
-		margin-left: 16px;
+		margin: 0 0 0 16px;
 	}
 
 	.brand {

source/style/modules/ui/_settings_module.scss

@@ -1,57 +0,0 @@
-@mixin nav-spacer($name, $size, $orientation) {
-	.spacer-#{$name} {
-		width: $size;
-		margin: 0;
-		border: $border_dotted;
-		opacity: .25;
-	}
-}
-
-.body_setting {
-	@extend .body_ui;
-
-	background-color: $color_back_basic;
-}
-
-#frame {
-	@extend %flex-column;
-
-	position: relative;
-	height: 100%;
-
-	header,
-	aside,
-	footer {
-		border: 1px solid transparent;
-	}
-
-	&>header {
-		background-color: rgba(0, 0, 0, .1);
-	}
-
-	main {
-		@extend %flex-row;
-
-		flex: 1;
-
-		aside {
-			background-color: $color_brighter;
-		}
-
-		section {
-			flex: 1;
-		}
-	}
-}
-
-.io {
-	.spacer {
-		width: $space_double;
-		margin: 0;
-		border: $border_dotted;
-		opacity: .25;
-	}
-
-	@include nav-spacer('a', $space_double, false);
-	@include nav-spacer('b', $space_small, false);
-}

source/style/ui.scss

@@ -22,11 +22,6 @@ $color_gui_back: $color_dark;
 	}
 }
 
-.body_ui {
-	height: 100vh;
-	background-color: $color_gui_back;
-}
-
 .step {
 	@extend %full_parent;
 }
@@ -191,7 +186,7 @@ $color_gui_back: $color_dark;
 	font-family: $family_text_mono;
 }
 
+@import "modules/ui/frame_module";
 @import "modules/ui/new_module";
-@import "modules/ui/settings_module";
 @import "modules/ui/drag_module";
 @import "modules/ui/form_module";

source/templates/demo/_app.njk

@@ -1,29 +0,0 @@
-<!-- demo.app.template -->
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-	<head>
-		<meta charset="utf-8">
-
-		{% block head %}
-			<title>{{ hippie.titlePrefix }}
-				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-			{% block meta %}
-				{% include "demo/partials/_meta.njk" %}
-				<base href="/">
-			{% endblock %}
-
-			{% block links %}{% endblock %}
-
-		{% endblock %}
-	</head>
-
-	<body class="{{ bodyClass }}">
-		{% block body %}{% endblock %}
-
-		{% block script %}
-			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-			<script src="{{ pageBase }}js/variables.js"></script>
-		{% endblock %}
-	</body>
-</html>

source/templates/hippie/_app.njk

@@ -0,0 +1,51 @@
+<!-- app.template -->
+<!DOCTYPE html>
+<html lang="de" class="html_ui" id="{{ pageId }}">
+	<head>
+		<meta charset="utf-8">
+
+		{% block head %}
+			<title>{{ hippie.titlePrefix }}
+				{%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
+
+			{% block meta %}
+				{% include "hippie/partials/_head_meta.njk" %}
+				<base href="/">
+			{% endblock %}
+
+			{% block links %}{% endblock %}
+
+		{% endblock %}
+	</head>
+
+	<body class="{{ bodyClass if bodyClass else 'body_frame' }}">
+		{% block body %}{% endblock %}
+
+		{% block script %}
+			<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+			<script src="{{ pageBase }}js/variables.js"></script>
+			<script src="{{ pageBase }}js/app.js"></script>
+
+			<script>
+				const frameHeader = document.querySelector('body > header.io');
+				const closeActionElements = document.querySelectorAll('[data-action=close]');
+
+				if (frameHeader) {
+					console.log('frame header found', frameHeader);
+
+					frameHeader.addEventListener('click', (e) => {
+						if (e.target.dataset.action === 'close') {
+							console.debug('close', e.target);
+
+							history.back();
+
+							if (closeActionElements.length > 1) {
+								console.debug('other frames present', closeActionElements.length);
+							}
+						}
+					});
+				}
+			</script>
+		{% endblock %}
+	</body>
+</html>

source/templates/hippie/_app_frame.njk

@@ -0,0 +1,17 @@
+<!-- frame.app.template -->
+{% extends "hippie/_app.njk" %}
+{% import "hippie/macros/_io.njk" as io %}
+
+{% block head %}
+	{{ super() }}
+{% endblock %}
+
+{% block links %}
+	{{ super() }}
+	<link href="/vendor/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet">
+	<link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block script %}
+	{{ super() }}
+{% endblock %}

source/templates/hippie/macros/_io.njk

@@ -0,0 +1,35 @@
+{% macro frameHeader(title) %}
+	<header class="io">
+		<nav>
+			<button title="menu">
+				<i class="bi bi-three-dots"></i>
+			</button>
+			<span>{{ title }}</span>
+		</nav>
+		<nav>
+			<div class="spacer a"></div>
+			<button title="minimize">
+				<i class="bi bi-dash"></i>
+			</button>
+			<button title="maximize">
+				<i class="bi bi-fullscreen"></i>
+			</button>
+			<button title="close" data-action="close">
+				<i class="bi bi-x-square"></i>
+			</button>
+		</nav>
+	</header>
+{% endmacro %}
+
+{% macro frameFooter(title) %}
+	<footer class="io">
+		<nav>
+			<button>mode</button>
+			<span>{{ title }}</span>
+		</nav>
+		<nav>
+			<div class="spacer a"></div>
+			<button>action</button>
+		</nav>
+	</footer>
+{% endmacro %}