refine webgpu gallery

Author: recp

gallery.css

@@ -53,16 +53,10 @@ a:focus-visible, button:focus-visible { outline: 2px solid var(--copper-bright);
   clip-path: polygon(0 0,100% 0,100% 70%,70% 100%,0 100%);
 }
 .brand-copy { display: flex; flex-direction: column; gap: 2px; }
-.brand-copy strong { font-size: 15px; letter-spacing: .08em; }
-.brand-copy small {
-  color: var(--stone-dark);
-  font: 10px/1.3 var(--mono);
-  letter-spacing: .13em;
-  text-transform: uppercase;
-}
-.main-nav { display: flex; gap: 38px; color: var(--stone); font: 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
+.brand-copy strong { font-size: 13px; letter-spacing: .05em; white-space: nowrap; }
+.gallery-label { color: var(--stone); font: 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
 .header-link { justify-self: end; display: flex; gap: 12px; font: 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
-.main-nav a:hover, .header-link:hover { color: var(--copper-bright); }
+.header-link:hover { color: var(--copper-bright); }
 
 .eyebrow {
   display: flex;
@@ -112,35 +106,46 @@ a:focus-visible, button:focus-visible { outline: 2px solid var(--copper-bright);
   position: absolute;
   top: 16px;
   right: 16px;
-  min-width: 154px;
-  padding: 13px 14px;
-  display: grid;
-  gap: 5px;
+  width: 174px;
+  overflow: hidden;
   color: var(--stone);
   background: rgba(11, 11, 10, .86);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 9px;
   box-shadow: 0 12px 36px rgba(0, 0, 0, .28);
   backdrop-filter: blur(12px);
   font: 10px/1.3 var(--mono);
-  pointer-events: none;
 }
-.debug-overlay[hidden] { display: none; }
-.debug-overlay b { color: var(--paper); font-size: 13px; font-weight: 600; }
-.debug-overlay small { margin-top: 3px; color: var(--stone-dark); }
+.debug-toggle {
+  width: 100%;
+  height: 38px;
+  padding: 0 13px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: var(--paper);
+  background: transparent;
+  border: 0;
+  font: 600 11px/1 var(--mono);
+  cursor: pointer;
+}
+.debug-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; transform: rotate(180deg); }
+.debug-overlay[data-expanded="false"] { width: 88px; }
+.debug-overlay[data-expanded="false"] .debug-toggle svg { transform: none; }
+.debug-overlay[data-expanded="false"] .debug-metrics { display: none; }
+.debug-metrics { padding: 0 13px 13px; display: grid; gap: 5px; }
+.debug-metrics b { color: var(--paper); font-size: 13px; font-weight: 600; }
 .stage-meta { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 10px 0; }
 .stage-meta p { max-width: 760px; margin: 0; color: var(--stone); font-size: 13px; line-height: 1.5; }
 .stage-meta p .project-link { color: var(--link-blue); }
 #status { color: var(--stone-dark); font: 10px/1.4 var(--mono); }
 #status[data-failed="true"] { color: #ff765f; }
 
 .source-panel { margin-top: 80px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; }
-.source-head { min-height: 86px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--line); }
-.source-head .eyebrow { margin: 0 0 7px; font-size: 9px; }
-.source-head h2 { margin: 0; font-size: 22px; font-weight: 520; }
+.source-toolbar { min-height: 48px; display: flex; align-items: stretch; justify-content: space-between; border-bottom: 1px solid var(--line); }
 .copy-button { padding: 9px 12px; color: var(--stone); background: transparent; border: 1px solid var(--line); font: 10px/1 var(--mono); cursor: pointer; }
 .copy-button:hover { color: var(--ink); background: var(--copper); border-color: var(--copper); }
-.source-tabs { display: flex; padding: 0 22px; border-bottom: 1px solid var(--line); }
+.source-tabs { display: flex; padding: 0 22px; }
 .source-tabs button { padding: 16px 14px 14px; color: var(--stone-dark); background: none; border: 0; border-bottom: 2px solid transparent; font: 10px/1 var(--mono); cursor: pointer; }
 .source-tabs button[aria-selected="true"] { color: var(--copper-bright); border-bottom-color: var(--copper); }
 #source-code { max-height: 760px; overflow: auto; display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; padding: 0; color: #d8d1c6; background: #0e0e0c; font: 12px/1.75 var(--mono); tab-size: 2; }
@@ -156,7 +161,7 @@ a:focus-visible, button:focus-visible { outline: 2px solid var(--copper-bright);
 .syntax-function { color: #e8ded0; }
 
 .sample-page.embed { overflow: hidden; background: #030817; }
-.sample-page.embed .sample-head, .sample-page.embed .stage-meta, .sample-page.embed .source-panel { display: none; }
+.sample-page.embed .sample-head, .sample-page.embed .debug-overlay, .sample-page.embed .stage-meta, .sample-page.embed .source-panel { display: none; }
 .sample-page.embed .sample-workbench { width: 100%; height: 100vh; padding: 0; }
 .sample-page.embed .stage { height: 100vh; padding: 0; border: 0; }
 .sample-page.embed .stage canvas { width: 100%; height: 100%; min-height: 100vh; border: 0; }
@@ -167,7 +172,7 @@ a:focus-visible, button:focus-visible { outline: 2px solid var(--copper-bright);
 @media (max-width: 680px) {
   .shell, .site-header, .sample-head, .sample-workbench { width: min(100% - 32px, 1440px); }
   .site-header { grid-template-columns: 1fr auto; }
-  .main-nav { display: none; }
+  .gallery-label { display: none; }
   .sample-section { padding-block: 64px 92px; }
   .sample-head { grid-template-columns: 1fr auto; padding-block: 20px; }
   .sample-heading { grid-row: 2; grid-column: 1 / -1; margin-top: 24px; }

gpu-compute-webgpu-usl-shell.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="icon" href="data:,">
-  <link rel="stylesheet" href="gallery.css?v=4">
+  <link rel="stylesheet" href="gallery.css?v=5">
   <title>Compute handoff · GPU + USL</title>
 </head>
 <body class="sample-page"
@@ -23,35 +23,44 @@ <h1>Compute handoff</h1>
   <main class="sample-workbench">
     <section class="stage" aria-label="Live WebGPU output">
       <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
-      <aside class="debug-overlay" hidden aria-live="off"></aside>
+      <aside class="debug-overlay" aria-label="Debug metrics">
+        <button class="debug-toggle" type="button" aria-expanded="true">
+          <span>Debug</span>
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="m4 6 4 4 4-4"/>
+          </svg>
+        </button>
+        <div class="debug-metrics" aria-live="off">
+          <b data-debug="fps">-- FPS</b>
+          <span data-debug="frame">-- ms frame</span>
+          <span data-debug="heap">-- Wasm heap</span>
+          <span data-debug="canvas">-- × -- px</span>
+        </div>
+      </aside>
       <div class="stage-meta">
         <p>Compute writes the vertex stream; render consumes it in the same command buffer without readback.</p>
         <div id="status">GPU: loading sample</div>
       </div>
     </section>
 
-    <section class="source-panel" aria-labelledby="source-title">
-      <header class="source-head">
-        <div>
-          <p class="eyebrow">Artifact inspection</p>
-          <h2 id="source-title">Source path</h2>
+    <section class="source-panel" aria-label="Source">
+      <div class="source-toolbar">
+        <div class="source-tabs" role="tablist" aria-label="Source language">
+          <button id="tab-c" role="tab" aria-selected="true"
+                  aria-controls="source-code" data-source="c">GPU C</button>
+          <button id="tab-usl" role="tab" aria-selected="false"
+                  aria-controls="source-code" data-source="usl">USL</button>
+          <button id="tab-wgsl" role="tab" aria-selected="false"
+                  aria-controls="source-code" data-source="wgsl">Generated WGSL</button>
         </div>
         <button class="copy-button" type="button">Copy</button>
-      </header>
-      <div class="source-tabs" role="tablist" aria-label="Source language">
-        <button id="tab-c" role="tab" aria-selected="true"
-                aria-controls="source-code" data-source="c">GPU C</button>
-        <button id="tab-usl" role="tab" aria-selected="false"
-                aria-controls="source-code" data-source="usl">USL</button>
-        <button id="tab-wgsl" role="tab" aria-selected="false"
-                aria-controls="source-code" data-source="wgsl">Generated WGSL</button>
       </div>
       <pre id="source-code" role="tabpanel" aria-labelledby="tab-c"
            tabindex="0"><span class="line-numbers" aria-hidden="true"></span><code>Loading source…</code></pre>
     </section>
   </main>
 
-  <script src="sample.js?v=3" defer></script>
+  <script src="sample.js?v=4" defer></script>
   {{{ SCRIPT }}}
 </body>
 </html>

gpu-compute-webgpu-usl.html

@@ -1 +1 @@
-<!doctypehtml><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=data:, rel=icon><link href="gallery.css?v=4"rel=stylesheet><title>Compute handoff · GPU + USL</title></head><body class=sample-page data-c-source=sources/compute.c data-usl-source=sources/compute.usl data-wgsl-source=sources/compute.wgsl><header class=sample-head><a class=back-link href=index.html><span>←</span> Sample index</a><div class=sample-heading><p>Compute / storage buffer</p><h1>Compute handoff</h1></div><div class=runtime-badge><i></i> WebGPU live</div></header><main class=sample-workbench><section class=stage aria-label="Live WebGPU output"><canvas id=canvas oncontextmenu=event.preventDefault()></canvas><aside aria-live=off class=debug-overlay hidden></aside><div class=stage-meta><p>Compute writes the vertex stream; render consumes it in the same command buffer without readback.</p><div id=status>GPU: loading sample</div></div></section><section class=source-panel aria-labelledby=source-title><header class=source-head><div><p class=eyebrow>Artifact inspection</p><h2 id=source-title>Source path</h2></div><button class=copy-button type=button>Copy</button></header><div class=source-tabs aria-label="Source language"role=tablist><button aria-controls=source-code aria-selected=true data-source=c id=tab-c role=tab>GPU C</button> <button aria-controls=source-code aria-selected=false data-source=usl id=tab-usl role=tab>USL</button> <button aria-controls=source-code aria-selected=false data-source=wgsl id=tab-wgsl role=tab>Generated WGSL</button></div><pre aria-labelledby=tab-c id=source-code role=tabpanel tabindex=0><span aria-hidden=true class=line-numbers></span><code>Loading source…</code></pre></section></main><script src="sample.js?v=3"defer></script><script src=gpu-compute-webgpu-usl.js async></script></body></html>
+<!doctypehtml><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=data:, rel=icon><link href="gallery.css?v=5"rel=stylesheet><title>Compute handoff · GPU + USL</title></head><body class=sample-page data-c-source=sources/compute.c data-usl-source=sources/compute.usl data-wgsl-source=sources/compute.wgsl><header class=sample-head><a class=back-link href=index.html><span>←</span> Sample index</a><div class=sample-heading><p>Compute / storage buffer</p><h1>Compute handoff</h1></div><div class=runtime-badge><i></i> WebGPU live</div></header><main class=sample-workbench><section aria-label="Live WebGPU output"class=stage><canvas id=canvas oncontextmenu=event.preventDefault()></canvas><aside aria-label="Debug metrics"class=debug-overlay><button class=debug-toggle type=button aria-expanded=true><span>Debug</span> <svg aria-hidden=true viewBox="0 0 16 16"><path d="m4 6 4 4 4-4"/></svg></button><div class=debug-metrics aria-live=off><b data-debug=fps>-- FPS</b> <span data-debug=frame>-- ms frame</span> <span data-debug=heap>-- Wasm heap</span> <span data-debug=canvas>-- × -- px</span></div></aside><div class=stage-meta><p>Compute writes the vertex stream; render consumes it in the same command buffer without readback.</p><div id=status>GPU: loading sample</div></div></section><section aria-label=Source class=source-panel><div class=source-toolbar><div class=source-tabs aria-label="Source language"role=tablist><button aria-controls=source-code aria-selected=true data-source=c id=tab-c role=tab>GPU C</button> <button aria-controls=source-code aria-selected=false data-source=usl id=tab-usl role=tab>USL</button> <button aria-controls=source-code aria-selected=false data-source=wgsl id=tab-wgsl role=tab>Generated WGSL</button></div><button class=copy-button type=button>Copy</button></div><pre aria-labelledby=tab-c id=source-code role=tabpanel tabindex=0><span aria-hidden=true class=line-numbers></span><code>Loading source…</code></pre></section></main><script src="sample.js?v=4"defer></script><script src=gpu-compute-webgpu-usl.js async></script></body></html>

gpu-indexed-depth-webgpu-usl-shell.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <link rel="icon" href="data:,">
-  <link rel="stylesheet" href="gallery.css?v=4">
+  <link rel="stylesheet" href="gallery.css?v=5">
   <title>Indexed depth · GPU + USL</title>
 </head>
 <body class="sample-page"
@@ -23,35 +23,44 @@ <h1>Indexed depth</h1>
   <main class="sample-workbench">
     <section class="stage" aria-label="Live WebGPU output">
       <canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
-      <aside class="debug-overlay" hidden aria-live="off"></aside>
+      <aside class="debug-overlay" aria-label="Debug metrics">
+        <button class="debug-toggle" type="button" aria-expanded="true">
+          <span>Debug</span>
+          <svg viewBox="0 0 16 16" aria-hidden="true">
+            <path d="m4 6 4 4 4-4"/>
+          </svg>
+        </button>
+        <div class="debug-metrics" aria-live="off">
+          <b data-debug="fps">-- FPS</b>
+          <span data-debug="frame">-- ms frame</span>
+          <span data-debug="heap">-- Wasm heap</span>
+          <span data-debug="canvas">-- × -- px</span>
+        </div>
+      </aside>
       <div class="stage-meta">
         <p>One indexed draw validates the depth texture, pipeline, attachment, and occlusion path.</p>
         <div id="status">GPU: loading sample</div>
       </div>
     </section>
 
-    <section class="source-panel" aria-labelledby="source-title">
-      <header class="source-head">
-        <div>
-          <p class="eyebrow">Artifact inspection</p>
-          <h2 id="source-title">Source path</h2>
+    <section class="source-panel" aria-label="Source">
+      <div class="source-toolbar">
+        <div class="source-tabs" role="tablist" aria-label="Source language">
+          <button id="tab-c" role="tab" aria-selected="true"
+                  aria-controls="source-code" data-source="c">GPU C</button>
+          <button id="tab-usl" role="tab" aria-selected="false"
+                  aria-controls="source-code" data-source="usl">USL</button>
+          <button id="tab-wgsl" role="tab" aria-selected="false"
+                  aria-controls="source-code" data-source="wgsl">Generated WGSL</button>
         </div>
         <button class="copy-button" type="button">Copy</button>
-      </header>
-      <div class="source-tabs" role="tablist" aria-label="Source language">
-        <button id="tab-c" role="tab" aria-selected="true"
-                aria-controls="source-code" data-source="c">GPU C</button>
-        <button id="tab-usl" role="tab" aria-selected="false"
-                aria-controls="source-code" data-source="usl">USL</button>
-        <button id="tab-wgsl" role="tab" aria-selected="false"
-                aria-controls="source-code" data-source="wgsl">Generated WGSL</button>
       </div>
       <pre id="source-code" role="tabpanel" aria-labelledby="tab-c"
            tabindex="0"><span class="line-numbers" aria-hidden="true"></span><code>Loading source…</code></pre>
     </section>
   </main>
 
-  <script src="sample.js?v=3" defer></script>
+  <script src="sample.js?v=4" defer></script>
   {{{ SCRIPT }}}
 </body>
 </html>

gpu-indexed-depth-webgpu-usl.html

@@ -1 +1 @@
-<!doctypehtml><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=data:, rel=icon><link href="gallery.css?v=4"rel=stylesheet><title>Indexed depth · GPU + USL</title></head><body class=sample-page data-c-source=sources/indexed-depth.c data-usl-source=sources/indexed-depth.usl data-wgsl-source=sources/indexed-depth.wgsl><header class=sample-head><a class=back-link href=index.html><span>←</span> Sample index</a><div class=sample-heading><p>Render / index + depth</p><h1>Indexed depth</h1></div><div class=runtime-badge><i></i> WebGPU live</div></header><main class=sample-workbench><section class=stage aria-label="Live WebGPU output"><canvas id=canvas oncontextmenu=event.preventDefault()></canvas><aside aria-live=off class=debug-overlay hidden></aside><div class=stage-meta><p>One indexed draw validates the depth texture, pipeline, attachment, and occlusion path.</p><div id=status>GPU: loading sample</div></div></section><section class=source-panel aria-labelledby=source-title><header class=source-head><div><p class=eyebrow>Artifact inspection</p><h2 id=source-title>Source path</h2></div><button class=copy-button type=button>Copy</button></header><div class=source-tabs aria-label="Source language"role=tablist><button aria-controls=source-code aria-selected=true data-source=c id=tab-c role=tab>GPU C</button> <button aria-controls=source-code aria-selected=false data-source=usl id=tab-usl role=tab>USL</button> <button aria-controls=source-code aria-selected=false data-source=wgsl id=tab-wgsl role=tab>Generated WGSL</button></div><pre aria-labelledby=tab-c id=source-code role=tabpanel tabindex=0><span aria-hidden=true class=line-numbers></span><code>Loading source…</code></pre></section></main><script src="sample.js?v=3"defer></script><script src=gpu-indexed-depth-webgpu-usl.js async></script></body></html>
+<!doctypehtml><html lang=en><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1"name=viewport><link href=data:, rel=icon><link href="gallery.css?v=5"rel=stylesheet><title>Indexed depth · GPU + USL</title></head><body class=sample-page data-c-source=sources/indexed-depth.c data-usl-source=sources/indexed-depth.usl data-wgsl-source=sources/indexed-depth.wgsl><header class=sample-head><a class=back-link href=index.html><span>←</span> Sample index</a><div class=sample-heading><p>Render / index + depth</p><h1>Indexed depth</h1></div><div class=runtime-badge><i></i> WebGPU live</div></header><main class=sample-workbench><section aria-label="Live WebGPU output"class=stage><canvas id=canvas oncontextmenu=event.preventDefault()></canvas><aside aria-label="Debug metrics"class=debug-overlay><button class=debug-toggle type=button aria-expanded=true><span>Debug</span> <svg aria-hidden=true viewBox="0 0 16 16"><path d="m4 6 4 4 4-4"/></svg></button><div class=debug-metrics aria-live=off><b data-debug=fps>-- FPS</b> <span data-debug=frame>-- ms frame</span> <span data-debug=heap>-- Wasm heap</span> <span data-debug=canvas>-- × -- px</span></div></aside><div class=stage-meta><p>One indexed draw validates the depth texture, pipeline, attachment, and occlusion path.</p><div id=status>GPU: loading sample</div></div></section><section aria-label=Source class=source-panel><div class=source-toolbar><div class=source-tabs aria-label="Source language"role=tablist><button aria-controls=source-code aria-selected=true data-source=c id=tab-c role=tab>GPU C</button> <button aria-controls=source-code aria-selected=false data-source=usl id=tab-usl role=tab>USL</button> <button aria-controls=source-code aria-selected=false data-source=wgsl id=tab-wgsl role=tab>Generated WGSL</button></div><button class=copy-button type=button>Copy</button></div><pre aria-labelledby=tab-c id=source-code role=tabpanel tabindex=0><span aria-hidden=true class=line-numbers></span><code>Loading source…</code></pre></section></main><script src="sample.js?v=4"defer></script><script src=gpu-indexed-depth-webgpu-usl.js async></script></body></html>