From 2af380498a8343471810fdeb99c1044072d0de45 Mon Sep 17 00:00:00 2001
From: Steven Vandevelde <steven@tokono.ma>
Date: Thu, 30 Apr 2026 17:11:02 +0200
Subject: [PATCH] chore: create page with new generate section

---
 src/_components/grid.vto           |  2 +-
 src/_components/nav.vto            |  4 +-
 src/common/pages/dashboard.js      |  2 +-
 src/common/pages/ppr.js            |  2 +-
 src/{code.vto => create.vto}       | 90 +++++++++++++++++++++++-------
 src/elements.vto                   |  2 +-
 src/skills/diffuse-facet/SKILL.md  |  4 +-
 src/styles/diffuse/code-editor.css |  6 +-
 src/styles/diffuse/colors.css      |  2 +-
 9 files changed, 84 insertions(+), 30 deletions(-)
 rename src/{code.vto => create.vto} (67%)

diff --git a/src/_components/grid.vto b/src/_components/grid.vto
index b9c9dc83..67dcd4f1 100644
--- a/src/_components/grid.vto
+++ b/src/_components/grid.vto
@@ -78,7 +78,7 @@
           <i class="ph-bold ph-dots-three-vertical"></i>
         </button>
         <div id="grid-item-menu-{{ index }}" class="dropdown" popover>
-          <a class="with-icon" href="code/?uri={{ encodeURIComponent(facetUri) }}&name={{ encodeURIComponent(item.title) }}&kind={{ item.kind ?? `interface` }}&description={{ encodeURIComponent(item.desc.trim()) }}">
+          <a class="with-icon" href="create/?uri={{ encodeURIComponent(facetUri) }}&name={{ encodeURIComponent(item.title) }}&kind={{ item.kind ?? `interface` }}&description={{ encodeURIComponent(item.desc.trim()) }}">
             <i class="ph-fill ph-code-block"></i>
             Open code in editor
           </a>
diff --git a/src/_components/nav.vto b/src/_components/nav.vto
index 6d20fa40..f55b0f0f 100644
--- a/src/_components/nav.vto
+++ b/src/_components/nav.vto
@@ -31,10 +31,10 @@
       </span>
     </a>
 
-    <a href="code/" class="button {{ colorClass("code/") }} button--border">
+    <a href="create/" class="button {{ colorClass("create/") }} button--border">
       <span class="with-icon">
         <i class="ph-fill ph-hammer"></i>
-        Code
+        Create
       </span>
     </a>
   </nav>
diff --git a/src/common/pages/dashboard.js b/src/common/pages/dashboard.js
index 22f09981..51c67eae 100644
--- a/src/common/pages/dashboard.js
+++ b/src/common/pages/dashboard.js
@@ -272,7 +272,7 @@ function _renderList(output, listEl) {
                   <div id="facet-menu-${c.id}" class="dropdown" popover>
                     <a
                       class="with-icon"
-                      href="code/?id=${encodeURIComponent(c.id)}"
+                      href="create/?id=${encodeURIComponent(c.id)}"
                     >
                       <i class="ph-fill ph-code-block"></i>
                       Edit
diff --git a/src/common/pages/ppr.js b/src/common/pages/ppr.js
index 612dfe18..7740483d 100644
--- a/src/common/pages/ppr.js
+++ b/src/common/pages/ppr.js
@@ -38,7 +38,7 @@ async function initJsBasedOnPage(url) {
   await Grid.setupOutputIndicator();
 
   switch (path) {
-    case "/code":
+    case "/create":
       Build.renderEditor();
       Build.handleBuildFormSubmit();
       Build.listenForExamplesEdit();
diff --git a/src/code.vto b/src/create.vto
similarity index 67%
rename from src/code.vto
rename to src/create.vto
index fdcac0ff..9dc6870b 100644
--- a/src/code.vto
+++ b/src/create.vto
@@ -1,7 +1,7 @@
 ---
 layout: layouts/kitchen.vto
 base: ../
-title: Code | Diffuse
+title: Create | Diffuse
 
 examples:
   - url: "facets/examples/now-playing/index.html"
@@ -22,7 +22,7 @@ examples:
 </style>
 
 
-<h1 id="code" hidden>Code</h1>
+<h1 id="create" hidden>Create</h1>
 
 
 <!-- BUILD -->
@@ -35,18 +35,18 @@ examples:
 
     <div style="flex: 1; font-size: var(--fs-sm); max-width: var(--container-sm)">
       <p style="margin-top: 0">
-        Your code here builds on the <a href="#foundation">foundation</a> listed below, and will be injected into a <span style="white-space: nowrap"><code>&lt;div id="container"&gt;</code></span> element in the body.
-      </p>
-      <p>
-        <input id="name-input" type="text" placeholder="Name" name="name" required />
+        <label for="name-input">Name</label>
+        <input id="name-input" type="text" placeholder="Name" name="name" value="New facet" required />
       </p>
       <p>
+        <label for="kind-input">Kind</label>
         <select id="kind-input" name="kind">
-          <option value="interactive" selected>Interactive</option>
-          <option value="prelude">Prelude</option>
+          <option value="interactive" selected>Interactive (Interface)</option>
+          <option value="prelude">Prelude (Feature)</option>
         </select>
       </p>
       <p>
+        <label for="description-input">Description</label>
         <textarea id="description-input" placeholder="Description" name="description" rows="5"></textarea>
       </p>
       <p>
@@ -59,13 +59,73 @@ examples:
   </form>
 </section>
 
+<!-- GENERATE -->
+<div class="columns">
+  <section class="flex">
+    <h2 id="generate">Generate</h2>
+
+    <p>
+      <strong>You can generate interfaces or features easily using AI.</strong> Diffuse provides a skill to use with LLMs. Claude usage example:
+    </p>
+
+    <ul>
+      <li>
+        <p>
+          <a href="skills/diffuse-facet.zip" class="button" download>Download skill</a>
+        </p>
+      </li>
+      <li>
+        <p>
+          Open up <a href="https://claude.ai/customize/skills" target="_blank">skills screen</a> <small>(Customise tab in sidebar)</small>
+        </p>
+      </li>
+      <li>
+        <p>
+          <span class="with-icon">
+            <i class="ph-bold ph-plus"></i>
+            <span>Create skill</span>
+            <i class="ph-bold ph-arrow-right"></i>
+            <span>Upload skill</span>
+          </span>
+        </p>
+      </li>
+      <li>
+        <p>
+          Select downloaded zip file
+        </p>
+      </li>
+      <li>
+        <p>
+          Try in chat and follow directions
+        </p>
+      </li>
+    </ul>
+  </section>
+
+  <section class="flex">
+    <h2 id="notes">Notes</h2>
+
+    <p>
+      Facets will be injected into a <span style="white-space: nowrap"><code>&lt;div id="container"&gt;</code></span> element in the body.
+    </p>
+    <p>
+      While you have the ability to do whatever you want in a custom facet, the existing facets are designed to work a certain way; so here's some things to keep in mind:
+    </p>
+    <ul>
+      <li><span>Prelude (feature) facets are loaded in alphabetical order by the facet loader.</span></li>
+      <li><span>Most elements are configured in broadcast mode so they communicate across tabs. There are a few exceptions such as inputs, where we prefer parallelisation.</span></li>
+      <li><span>All URLs in a facet are relative to the root of Diffuse (not the root of the server) due to the base element in the header of the facet loader.</span></li>
+    </ul>
+  </section>
+</div>
+
 <!-- FOUNDATION -->
 <div class="columns">
   <section class="flex">
     <h2 id="foundation">Foundation</h2>
 
     <p>
-      <strong>Diffuse comes with a foundation that preconfigures a lot of elements so you don't have to set them up yourself</strong>, along with a combination of elements for certain features. It internally tracks the DOM addition of the custom elements, so no need to worry about setting up an element multiple times. It also provides signals which can be used to track element creations. An example of this can be found in the "scrobbles" feature.
+      <strong>Diffuse comes with a foundation that preconfigures a lot of the built-in Diffuse web components so you don't have to set them up yourself</strong>, along with a combination of components for certain features. It internally tracks the DOM addition of the custom elements, so no need to worry about setting up an element multiple times. It also provides signals which can be used to track element creations. An example of this can be found in the "scrobbles" feature.
     </p>
     <p>
       That said, you are not required not use this! You can, for example, setup a Diffuse audio engine element yourself that's in a different group so that it doesn't communicate with the default one; in case you want to make a dj-deck, or something like that, which would have multiple audio items playing at the same time. This does mean you will need to pay attention to more things, such as, how does this interact with other features the user has enabled.
@@ -107,19 +167,9 @@ examples:
     <h2 id="examples">Examples</h2>
 
     <p>
-      Some simple examples to help you understand how to build your own facet. Click the edit button to load them into the code editor above.
+      Some simple examples to help you understand how to write your own facet. Click the edit button to load them into the code editor above.
     </p>
 
     {{ await comp.examples({ id: "examples", items: examples }) }}
-
-    <h2 id="notes">Notes</h2>
-    <p>
-      While you have the ability to do whatever you want in a custom facet, the existing facets are designed to work a certain way; so here's some things to keep in mind:
-    </p>
-    <ul>
-      <li><span>Prelude (feature) facets are loaded in alphabetical order by the facet loader.</span></li>
-      <li><span>Most elements are configured in broadcast mode so they communicate across tabs. There are a few exceptions such as inputs, where we prefer parallelisation.</span></li>
-      <li><span>All URLs in a facet are relative to the root of Diffuse (not the root of the server) due to the base element in the header of the facet loader.</span></li>
-    </ul>
   </section>
 </div>
diff --git a/src/elements.vto b/src/elements.vto
index 124d3620..a43accb3 100644
--- a/src/elements.vto
+++ b/src/elements.vto
@@ -22,7 +22,7 @@ styles:
       Elements
     </p>
     <p>
-      Diffuse was built using these web components, consume these using the <a href="../code/">code tool</a>, the Javascript <a href="https://jsr.io/@toko/diffuse">package</a>, or the linked Javascript files down below.
+      Diffuse was built using these web components, consume these using the <a href="../create/">create tool</a>, the Javascript <a href="https://jsr.io/@toko/diffuse">package</a>, or the linked Javascript files down below.
     </p>
     <ul class="table-of-contents">
       <li><a href="elements/#artwork">Artwork</a></li>
diff --git a/src/skills/diffuse-facet/SKILL.md b/src/skills/diffuse-facet/SKILL.md
index b95b9b42..3b73cee6 100644
--- a/src/skills/diffuse-facet/SKILL.md
+++ b/src/skills/diffuse-facet/SKILL.md
@@ -5,7 +5,7 @@ user-invocable: true
 version: 0.1.0
 ---
 
-Create a Diffuse facet and produce the HTML ready to paste into the `code/` page.
+Create a Diffuse facet and produce the HTML ready to paste into the `create/` page.
 
 ## Step 1 — Read the docs
 
@@ -161,4 +161,4 @@ queue.unshift();  // previous track
 
 ## Step 4 — Deliver
 
-Output the complete facet HTML in a code block. Tell the user to open the `code/` page in Diffuse, paste it in, and load it.
+Output the complete facet HTML in a code block. Tell the user to open the `create/` page in Diffuse, paste it in, and load it.
diff --git a/src/styles/diffuse/code-editor.css b/src/styles/diffuse/code-editor.css
index ce1764aa..61f9d4ac 100644
--- a/src/styles/diffuse/code-editor.css
+++ b/src/styles/diffuse/code-editor.css
@@ -1,7 +1,7 @@
 .code-editor {
   font-size: var(--fs-sm);
   /*font-size: calc((var(--fs-xs) + var(--fs-sm)) / 2);*/
-  height: var(--container-md);
+  height: var(--container-sm);
 }
 
 .code-editor .cm-editor {
@@ -13,6 +13,10 @@
     background: var(--accent-mark) !important;
   }
 
+  &.cm-focused {
+    outline: none;
+  }
+
   .cm-content {
     padding: var(--space-2xs) var(--space-3xs);
     padding-right: var(--space-2xs);
diff --git a/src/styles/diffuse/colors.css b/src/styles/diffuse/colors.css
index d617498f..9271d524 100644
--- a/src/styles/diffuse/colors.css
+++ b/src/styles/diffuse/colors.css
@@ -22,7 +22,7 @@
   --text-color: var(--color-1);
 
   --border-color: oklch(from var(--text-color) l c h / 0.1);
-  --code-color: oklch(from #fefcf1 l c h);
+  --code-color: oklch(1 0.01 98.09 / 1);
   --form-color: oklch(from var(--bg-color) calc(l - 0.075) c h / 1);
 }
 
-- 
2.51.2