Docs: add Clawdhub showcase previews

docs/assets/markdown.css

@@ -84,6 +84,52 @@
   box-shadow: 0 12px 0 -8px rgba(0, 0, 0, 0.18);
 }
 
+.showcase-link {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.showcase-preview {
+  position: absolute;
+  left: 50%;
+  top: 100%;
+  width: min(420px, 80vw);
+  padding: 8px;
+  border-radius: 14px;
+  background: color-mix(in oklab, var(--panel) 92%, transparent);
+  border: 1px solid color-mix(in oklab, var(--frame-border) 30%, transparent);
+  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
+  transform: translate(-50%, 10px) scale(0.98);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  z-index: 20;
+  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
+}
+
+.showcase-preview img {
+  width: 100%;
+  height: auto;
+  border-radius: 10px;
+  border: 1px solid color-mix(in oklab, var(--frame-border) 25%, transparent);
+  box-shadow: none;
+}
+
+.showcase-link:hover .showcase-preview,
+.showcase-link:focus-within .showcase-preview {
+  opacity: 1;
+  visibility: visible;
+  transform: translate(-50%, 6px) scale(1);
+}
+
+@media (hover: none) {
+  .showcase-preview {
+    display: none;
+  }
+}
+
 .markdown code {
   font-family: var(--font-body);
   font-size: 0.95em;

docs/assets/showcase/padel-cli.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="420" viewBox="0 0 800 420" role="img" aria-label="padel-cli availability output">
+  <rect width="800" height="420" rx="24" fill="#0b0f14" />
+  <rect x="24" y="24" width="752" height="372" rx="18" fill="#0f172a" stroke="#263246" stroke-width="2" />
+  <text x="48" y="72" fill="#9ca3af" font-size="18" font-family="Fragment Mono, ui-monospace, SFMono-Regular, Menlo, monospace">
+    <tspan x="48" dy="0">$ padel search --location "Barcelona" --date 2026-01-08 --time 18:00-22:00</tspan>
+    <tspan x="48" dy="30" fill="#e5e7eb">Available courts (3):</tspan>
+    <tspan x="48" dy="28" fill="#e5e7eb">- Vall d'Hebron 19:00 Court 2 (90m) EUR 34</tspan>
+    <tspan x="48" dy="28" fill="#e5e7eb">- Badalona 20:30 Court 1 (60m) EUR 28</tspan>
+    <tspan x="48" dy="28" fill="#e5e7eb">- Gracia 21:00 Court 4 (90m) EUR 36</tspan>
+  </text>
+</svg>

docs/assets/showcase/roborock-status.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="800" height="420" viewBox="0 0 800 420" role="img" aria-label="GoHome Roborock status output">
+  <rect width="800" height="420" rx="24" fill="#0b0f14" />
+  <rect x="24" y="24" width="752" height="372" rx="18" fill="#111827" stroke="#263246" stroke-width="2" />
+  <text x="48" y="72" fill="#9ca3af" font-size="18" font-family="Fragment Mono, ui-monospace, SFMono-Regular, Menlo, monospace">
+    <tspan x="48" dy="0">$ gohome roborock status --device "Living Room"</tspan>
+    <tspan x="48" dy="30" fill="#e5e7eb">Device: Roborock Q Revo</tspan>
+    <tspan x="48" dy="28" fill="#e5e7eb">State: cleaning (zone)</tspan>
+    <tspan x="48" dy="28" fill="#e5e7eb">Battery: 78%</tspan>
+    <tspan x="48" dy="28" fill="#e5e7eb">Dustbin: 42%</tspan>
+    <tspan x="48" dy="28" fill="#e5e7eb">Water tank: 61%</tspan>
+    <tspan x="48" dy="28" fill="#e5e7eb">Last clean: 2026-01-06 19:42</tspan>
+  </text>
+</svg>