feat: Replace ui drag screen with liquid template

- Recreate io macros as liquid partials
- Add app template based on default
- Drag screen uses app.liquid layout instead of _app_frame.njk

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

@@ -0,0 +1,48 @@
+---
+title: Drag
+tags:
+- ui
+---
+{% layout "hippie/app.liquid" %}
+
+{% 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">
+			{% render 'hippie/partials/frame-header.liquid' %}
+			<main></main>
+			{% render 'hippie/partials/frame-mode.liquid' %}
+		</div>
+	</div>
+</div>
+{% endblock %}
+
+{%- block script %}
+<script src="{{ pageBase }}js/_ui.js"></script>
+<script>
+	// 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', () => {
+		const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
+		newDiv.createDiv();
+		newDiv.appendToFrame(space);
+	});
+
+	// Create a new NewDiv instance
+	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/drag.njk

@@ -1,50 +0,0 @@
----
-title: Drag
-tags:
-  - ui
----
-{% set pageId = page.fileSlug %}
-
-{% extends "hippie/_app_frame.njk" %}
-
-{% 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 %}
-  <script src="{{ pageBase }}js/_ui.js"></script>
-  <script>
-    // 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', () => {
-      const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
-      newDiv.createDiv();
-      newDiv.appendToFrame(space);
-    });
-
-    // Create a new NewDiv instance
-    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/templates/hippie/app.liquid

@@ -0,0 +1,40 @@
+{% assign pageBase = "../../../" -%}
+{% assign pageId = page.fileSlug -%}
+{% assign pageClass = "html_ui" -%}
+{%- layout "hippie/default.liquid" %}
+
+{% block title %}{{ title }}{% endblock %}
+
+{% block links %}
+{{ block.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 %}
+{{ block.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/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 %}

source/templates/hippie/partials/frame-header.liquid

@@ -0,0 +1,20 @@
+<header class="io">
+	<nav>
+		<button title="menu">
+			<i class="bi bi-three-dots"></i>
+		</button>
+		<span>{{ title | default: 'title-bar' }}</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>

source/templates/hippie/partials/frame-mode.liquid

@@ -0,0 +1,10 @@
+<footer class="io">
+	<nav>
+		<button>mode</button>
+		<span>{{ title | default: 'mode-bar' }}</span>
+	</nav>
+	<nav>
+		<div class="spacer a"></div>
+		<button>action</button>
+	</nav>
+</footer>

source/templates/hippie/partials/frame-status.liquid

@@ -0,0 +1,11 @@
+<footer class="io">
+	<nav>
+		<span>## items</span>
+		<span># selected (size)</span>
+		<span># type(s)</span>
+		<span># shared</span>
+	</nav>
+	<nav>
+		<span>{{ title | default: 'status-bar' }}</span>
+	</nav>
+</footer>