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 %}