From 26c8d83040f859f53b64bcc23b393089931d13aa Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Mon, 6 Apr 2026 17:01:07 +0200
Subject: [PATCH] chore: demo page prep

---
 src/common/foundation.js                      |  8 ++++++-
 src/components/orchestrator/output/element.js |  8 +++++--
 src/demo.vto                                  | 24 +++++++++++++++++++
 src/index.vto                                 | 17 +++++++------
 src/styles/diffuse/page.css                   |  8 ++++++-
 5 files changed, 54 insertions(+), 11 deletions(-)
 create mode 100644 src/demo.vto

diff --git a/src/common/foundation.js b/src/common/foundation.js
index 67ecf8f8..5848a43b 100644
--- a/src/common/foundation.js
+++ b/src/common/foundation.js
@@ -384,7 +384,11 @@ async function mediaSession() {
   return findExistingOrAdd(mso, signals.orchestrator.mediaSession);
 }
 
-async function output() {
+/**
+ * @param {Object} [options] - Options
+ * @param {string} [options.namespace] - The namespace to use for the output.
+ */
+async function output(options) {
   const { default: OutputOrchestrator } = await import(
     "~/components/orchestrator/output/element.js"
   );
@@ -393,6 +397,8 @@ async function output() {
   o.setAttribute("group", GROUP);
   o.setAttribute("id", "output");
 
+  if (options?.namespace) o.setAttribute("namespace", options.namespace);
+
   return findExistingOrAdd(o, signals.orchestrator.output);
 }
 
diff --git a/src/components/orchestrator/output/element.js b/src/components/orchestrator/output/element.js
index 97dbb21b..d0b5e20d 100644
--- a/src/components/orchestrator/output/element.js
+++ b/src/components/orchestrator/output/element.js
@@ -1,5 +1,9 @@
 import { ifDefined } from "lit-html/directives/if-defined.js";
-import { DEFAULT_GROUP, defineElement, DiffuseElement } from "~/common/element.js";
+import {
+  DEFAULT_GROUP,
+  defineElement,
+  DiffuseElement,
+} from "~/common/element.js";
 
 import "~/components/configurator/output/element.js";
 import "~/components/transformer/output/refiner/default/element.js";
@@ -126,7 +130,7 @@ class OutputOrchestrator extends DiffuseElement {
     return html`
       <dop-indexed-db
         id="do-output__dop-indexed-db__json"
-        namespace="json"
+        namespace="${this.namespace ? this.namespace + "/" : ""}json"
         group="${ifDefined(group)}"
       ></dop-indexed-db>
 
diff --git a/src/demo.vto b/src/demo.vto
new file mode 100644
index 00000000..601eb306
--- /dev/null
+++ b/src/demo.vto
@@ -0,0 +1,24 @@
+---
+layout: layouts/diffuse.vto
+
+styles:
+  - styles/base.css
+  - styles/diffuse/page.css
+  - vendor/@phosphor-icons/web/bold/style.css
+  - vendor/@phosphor-icons/web/fill/style.css
+---
+
+<style>
+  main {}
+</style>
+
+<main>
+  <aside>
+    <h1 hidden>Diffuse</h1>
+    <div class="diffuse-logo-container">
+      {{ await comp.diffuse.logo() }}
+    </div>
+  </aside>
+  <div id="container">
+  </div>
+</main>
diff --git a/src/index.vto b/src/index.vto
index 034b52ea..386d6f22 100644
--- a/src/index.vto
+++ b/src/index.vto
@@ -28,14 +28,17 @@ scripts:
       <i class="ph-fill ph-crane"></i>
       <strong style="font-weight: 700;">WORK IN PROGRESS</strong>
     </p>
-    <ul class="table-of-contents">
-      <li><a href="guide/">Guide</a></li>
-      <li><a href="featured/">Featured</a></li>
-    </ul>
-    <p style="margin: var(--space-lg) 0">
-      <a class="button button--bg-accent" href="dashboard/">Open Diffuse</a>
+    <p style="margin-top: var(--space-lg)">
+      <a class="button button--bg-accent" href="dashboard/">
+          Open Diffuse
+      </a>
     </p>
-    <p>
+    <!--<p>
+      <a class="button button--subtle" href="dashboard/">
+          Roll the demo tape
+      </a>
+    </p>-->
+    <p style="margin-top: var(--space-lg)">
       <small style="line-height: var(--leading-relaxed)">
         Like using Diffuse? <a href="https://ko-fi.com/toko">Support with a donation!</a><br />
         Built with <a href="elements/">Diffuse elements</a><br />
diff --git a/src/styles/diffuse/page.css b/src/styles/diffuse/page.css
index 2a86ba06..becf5a5a 100644
--- a/src/styles/diffuse/page.css
+++ b/src/styles/diffuse/page.css
@@ -613,7 +613,7 @@ a.button {
   }
 
   &.button--subtle {
-    --button-bg-opacity: 0.3;
+    --button-bg-opacity: 0.35;
   }
 
   &.button--tag {
@@ -730,6 +730,12 @@ strong {
   gap: var(--space-3xs);
 }
 
+.with-icon--bigger-gap,
+button .with-icon--bigger-gap,
+.button .with-icon--bigger-gap {
+  gap: var(--space-2xs);
+}
+
 /**
  * Lists
  */
-- 
2.51.2