@vibes.diy/prompts 14.3.78 → 14.3.80

package/llms/image-gen.md

@@ -145,23 +145,26 @@ When each item's substance is its words — a generated joke, a short verse, a p
 
 ```jsx
 import { ImgGen, useImgGen } from "use-vibes";
+import { Button, RowCard, Text } from "@vibes.diy/pouf";
 
 function PunCard({ pun, database }) {
   const [wanted, setWanted] = React.useState(false);
   const { document: saved } = useImgGen({ _id: pun._id, database });
   const hasPicture = Object.keys(saved?._files ?? {}).length > 0;
   return (
-    <li>
-      <p>{pun.text}</p>
+    <RowCard>
+      <Text>{pun.text}</Text>
       {wanted || hasPicture ? (
         <figure>
           <ImgGen _id={pun._id} database={database} prompt={`A cheerful cartoon of this pun: ${pun.text}`} />
           {hasPicture ? null : <figcaption>Making a picture…</figcaption>}
         </figure>
       ) : (
-        <button onClick={() => setWanted(true)}>Picture this</button>
+        <Button type="button" size="sm" variant="quiet" onClick={() => setWanted(true)}>
+          Picture this
+        </Button>
       )}
-    </li>
+    </RowCard>
   );
 }
 ```
@@ -236,9 +239,44 @@ The platform predicate `ctx.isImgGenVersionAppend` accepts exactly one legitimat
 
 ## Choosing a Model
 
-Override the model per component: `<ImgGen prompt="An astronaut riding a horse" model="openai/gpt-5-image-mini" />`
+Every `<ImgGen>` draws with the app's default image model. `listModels({ kind: "image" })` (from `call-ai`, beside `callAI`) returns the image models this app can use, the app's own choice first, and each entry's `id` goes straight into the `model` prop: `<ImgGen prompt="An astronaut riding a horse" model={m.id} />`. The entry with `isDefault: true` is the one ImgGen uses when `model` is left out; with `images` present the default is the platform's image-edit model instead, so img2img leaves `model` out (see above). When the app's maker saved their own provider key, it covers the image model they chose in settings; other models run on the person's credits. The callAI skill's "Choosing a model" section lists every field.
 
-Model ids follow the `provider/model-name` form from the platform's model catalog. Unknown ids surface as an error in the component's error UI.
+To compare image models, call `listModels({ kind: "image" })` and render one `<ImgGen>` per entry with `model={m.id}`. Every picture shares one prompt, each card is labelled with `m.name`, and each `_id` pairs the prompt with the model so a reload shows the saved pictures:
+
+### `App.jsx`
+```jsx
+import React, { useEffect, useState } from "react";
+import { ImgGen } from "use-vibes";
+import { listModels } from "call-ai";
+import { Button, Card, Field, Grid, Input, Stack, Text } from "@vibes.diy/pouf";
+
+export default function App() {
+  const [models, setModels] = useState([]);
+  const [message, setMessage] = useState("");
+  const [draft, setDraft] = useState("a penguin riding a bicycle");
+  const [prompt, setPrompt] = useState("a penguin riding a bicycle");
+  useEffect(() => {
+    listModels({ kind: "image" })
+      .then(setModels)
+      .catch((error) => setMessage(error.message));
+  }, []);
+  return (
+    <Stack>
+      <Field label="Picture">{(id) => <Input id={id} value={draft} onChange={setDraft} />}</Field>
+      <Button onClick={() => setPrompt(draft)} disabled={draft.trim().length === 0}>Draw it with every model</Button>
+      <Text>{message}</Text>
+      <Grid cols={3}>
+        {models.map((m) => (
+          <Card key={m.id}>
+            <ImgGen _id={`audition:${prompt}:${m.id}`} prompt={prompt} model={m.id} alt={`${prompt}, drawn by ${m.name}`} />
+            <Text>{m.isDefault ? `${m.name} · this app's default` : m.name}</Text>
+          </Card>
+        ))}
+      </Grid>
+    </Stack>
+  );
+}
+```
 
 #### Props
 
@@ -248,4 +286,4 @@ Model ids follow the `provider/model-name` form from the platform's model catalo
 - `database`: Fireproof db name or instance (default `"ImgGen"`)
 - `className`, `alt`, `style`: standard image styling
 - `showControls`: toggle regenerate + version nav (default `true`)
-- `model`: override the image-gen model for this component
+- `model`: an `id` from `listModels({ kind: "image" })` to draw with instead of the app's default

package/llms/index.d.ts

@@ -1,5 +1,6 @@
 export { backendConfig } from "./backend.js";
 export { calendarConfig } from "./calendar.js";
+export { boardGamesConfig } from "./board-games.js";
 export { callaiConfig } from "./callai.js";
 export { fireproofConfig } from "./fireproof.js";
 export { imageGenConfig } from "./image-gen.js";
@@ -46,5 +47,5 @@ export { poufLandingConfig } from "./pouf-landing.js";
 export { poufCalendarConfig } from "./pouf-calendar.js";
 export { poufTestimonialsConfig } from "./pouf-testimonials.js";
 export type { LlmConfig } from "./types.js";
-export declare const allConfigs: readonly [import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig];
+export declare const allConfigs: readonly [import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig, import("./types.js").LlmConfig];
 export declare const FAST_SKILLS: readonly ["callai", "image-gen", "fireproof", "three-js", "d3", "webxr", "calendar", "spotify"];

package/llms/index.js

@@ -1,5 +1,6 @@
 import { backendConfig } from "./backend.js";
 import { calendarConfig } from "./calendar.js";
+import { boardGamesConfig } from "./board-games.js";
 import { callaiConfig } from "./callai.js";
 import { fireproofConfig } from "./fireproof.js";
 import { imageGenConfig } from "./image-gen.js";
@@ -47,6 +48,7 @@ import { poufCalendarConfig } from "./pouf-calendar.js";
 import { poufTestimonialsConfig } from "./pouf-testimonials.js";
 export { backendConfig } from "./backend.js";
 export { calendarConfig } from "./calendar.js";
+export { boardGamesConfig } from "./board-games.js";
 export { callaiConfig } from "./callai.js";
 export { fireproofConfig } from "./fireproof.js";
 export { imageGenConfig } from "./image-gen.js";
@@ -107,6 +109,7 @@ export const allConfigs = [
     createVibeConfig,
     backendConfig,
     calendarConfig,
+    boardGamesConfig,
     accessConfig,
     connectionsConfig,
     youtubeConfig,

package/llms/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/llms/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../jsr/llms/index.ts"],"names":[],"mappings":"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"}

package/llms/p5.md

@@ -24,7 +24,7 @@ the instance so remounts do not leak a second draw loop.
 ```jsx
 import React from "react";
 import p5 from "https://esm.sh/p5@1.11.13";
-import { Button } from "@vibes.diy/look";
+import { Button, Row, Stack } from "@vibes.diy/pouf";
 
 const TAU = Math.PI * 2;
 
@@ -191,16 +191,14 @@ export default function App() {
 
   return (
     <div className="min-h-screen bg-background text-foreground font-sans p-6">
-      <div
-        ref={hostRef}
-        className="w-full h-[70vh] overflow-hidden rounded-lg border border-border shadow-md touch-none"
-      />
-      <Button
-        className="mt-3"
-        onClick={() => setParams((prev) => ({ ...prev, seed: Math.floor(Math.random() * 100000) }))}
-      >
-        Reseed
-      </Button>
+      <Stack gap={3}>
+        <div ref={hostRef} className="w-full aspect-video overflow-hidden rounded-lg border border-border shadow-md touch-none" />
+        <Row>
+          <Button type="button" onClick={() => setParams((prev) => ({ ...prev, seed: Math.floor(Math.random() * 100000) }))}>
+            Reseed
+          </Button>
+        </Row>
+      </Stack>
     </div>
   );
 }

package/llms/spotify.md

@@ -306,6 +306,7 @@ function artistRow(a) {
 ### `App.jsx`
 ```jsx app=spotify-browser
 import React, { useState } from "react";
+import { Button, Field, Input, Row } from "@vibes.diy/pouf";
 
 const SETUP_STEPS = [
   "Open the Spotify developer dashboard and log in.",
@@ -333,8 +334,10 @@ export default function App() {
 
   return (
     <div>
-      <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search Spotify" />
-      <button onClick={search}>Search</button>
+      <Row gap={2} align="top">
+        <Field label="Search">{(id, describedBy) => <Input id={id} describedBy={describedBy} value={query} onChange={setQuery} placeholder="Search Spotify" />}</Field>
+        <Button type="button" onClick={search}>Search</Button>
+      </Row>
 
       {problem?.reason === "missing-key" && (
         <section>

package/llms/three-js.md

@@ -1213,7 +1213,7 @@ Structure your component in this order:
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import { useFireproof } from "use-fireproof";
 import * as THREE from "three";
-import { Card, CardContent, CardHeader, CardTitle } from "@vibes.diy/look";
+import { Card, Heading, Stack, Text } from "@vibes.diy/pouf";
 
 export default function SkyGlider() {
   const { database, useLiveQuery } = useFireproof("skyGliderScores");
@@ -1613,31 +1613,34 @@ export default function SkyGlider() {
   return (
     <div className="relative h-screen w-full bg-background text-foreground font-sans">
       <canvas ref={canvasRef} className="absolute inset-0" />
-      <Card className="absolute top-4 left-4">
-        <CardHeader>
-          <CardTitle>Sky Glider</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <p>Score: {currentScore}</p>
-          <p className="mt-2 text-muted-foreground">WASD/Arrows: Fly, Space: Thrust</p>
-        </CardContent>
-      </Card>
-      {scoreData.length > 0 && (
-        <Card className="absolute top-4 right-4">
-          <CardHeader>
-            <CardTitle>High Scores</CardTitle>
-          </CardHeader>
-          <CardContent>
-            {scoreData
-              .sort((a, b) => b.value - a.value)
-              .slice(0, 3)
-              .map((score, i) => (
-                <div key={score._id}>
-                  #{i + 1}: {score.value}
-                </div>
-              ))}
-          </CardContent>
+      {/* A pouf Card takes no className: a plain wrapper carries its placement. */}
+      <div className="absolute top-4 left-4">
+        <Card>
+          <Stack gap={2}>
+            <Heading level={2}>Sky Glider</Heading>
+            <Text num>Score: {currentScore}</Text>
+            <Text size="sm" muted>
+              WASD/Arrows: Fly, Space: Thrust
+            </Text>
+          </Stack>
         </Card>
+      </div>
+      {scoreData.length > 0 && (
+        <div className="absolute top-4 right-4">
+          <Card>
+            <Stack gap={2}>
+              <Heading level={2}>High Scores</Heading>
+              {scoreData
+                .sort((a, b) => b.value - a.value)
+                .slice(0, 3)
+                .map((score, i) => (
+                  <Text key={score._id} num>
+                    #{i + 1}: {score.value}
+                  </Text>
+                ))}
+            </Stack>
+          </Card>
+        </div>
       )}
     </div>
   );
@@ -1654,8 +1657,8 @@ import { OrbitControls } from "three/addons/controls/OrbitControls.js";
 import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
 import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
 import { HalftonePass } from "three/addons/postprocessing/HalftonePass.js";
-import { Button, Card, CardContent, CardHeader, CardTitle, Input, Label, Separator } from "@vibes.diy/look";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@vibes.diy/look/overlay";
+import { Button, Card, Field, Heading, Input, RowCard, Stack, Text } from "@vibes.diy/pouf";
+import { Checkbox, Select, Separator, Slider } from "@vibes.diy/pouf/interactive";
 
 export default function HalftoneArtStudio() {
   const { database, useLiveQuery } = useFireproof("halftoneStudio");
@@ -2001,154 +2004,148 @@ export default function HalftoneArtStudio() {
   const shapeName = ["", "Dot", "Ellipse", "Line", "Square"][parameters.shape] || "Dot";
   const blendModeName = ["", "Linear", "Multiply", "Add", "Lighter", "Darker"][parameters.blendingMode] || "Linear";
   const actionNames = {
-    "before-randomize": "🎲 Before Random",
-    randomized: "✨ Randomized",
-    manual: "✏️ Manual Edit",
+    "before-randomize": "Before Random",
+    randomized: "Randomized",
+    manual: "Manual Edit",
   };
 
   return (
     <div className="relative h-screen w-full overflow-hidden bg-background text-foreground font-sans">
       <canvas ref={canvasRef} className="absolute inset-0" />
 
-      {/* One control panel. The look's `Card` IS the panel — its `className`
-          carries placement only; the cushion, corner and ink are its own. */}
-      <Card className="absolute inset-y-4 left-4 w-80 overflow-y-auto">
-        <CardHeader>
-          <CardTitle>RGB Halftone Studio</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <Button className="w-full" onClick={generateRandomScene} disabled={isGenerating}>
-            {isGenerating ? "Generating…" : "🎲 Random Art"}
-          </Button>
-          <Button variant="secondary" className="w-full" onClick={() => setShowParameters(!showParameters)}>
-            {showParameters ? "🔼 Hide Controls" : "🔽 Show Controls"}
-          </Button>
-
-          {showParameters && (
-            <div className="space-y-4">
-              <Separator />
-
-              {/* A chooser is `Select`, and its props do the styling. */}
-              <div className="space-y-2">
-                <Label htmlFor="shape">Shape: {shapeName}</Label>
-                <Select value={String(parameters.shape)} onValueChange={(value) => setParameters((prev) => ({ ...prev, shape: parseInt(value) }))}>
-                  <SelectTrigger id="shape" className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="1">Dot</SelectItem>
-                    <SelectItem value="2">Ellipse</SelectItem>
-                    <SelectItem value="3">Line</SelectItem>
-                    <SelectItem value="4">Square</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              {/* A range slider and a checkbox are NOT in the package, so they
-                  stay plain elements you style by hand. Blend amount and the
-                  per-channel R/G/B rotations are this same Label + range pair,
-                  one per uniform. */}
-              <div className="space-y-2">
-                <Label htmlFor="size">Size: {parameters.radius.toFixed(1)}</Label>
-                <input
-                  id="size"
-                  type="range"
-                  min="1"
-                  max="25"
-                  step="0.5"
-                  value={parameters.radius}
-                  onChange={(e) => setParameters((prev) => ({ ...prev, radius: parseFloat(e.target.value) }))}
-                  className="w-full"
+      {/* One control panel. The pouf `Card` IS the panel — it takes no className,
+          so a plain wrapper carries its placement; the cushion, corner and ink are its own. */}
+      <div className="absolute inset-y-4 left-4 w-80 overflow-y-auto">
+        <Card>
+          <Stack gap={3}>
+            <Heading level={2}>RGB Halftone Studio</Heading>
+            <Button block loading={isGenerating} onClick={generateRandomScene}>
+              {isGenerating ? "Generating…" : "Random Art"}
+            </Button>
+            <Button block variant="quiet" aria-expanded={showParameters} onClick={() => setShowParameters(!showParameters)}>
+              {showParameters ? "Hide Controls" : "Show Controls"}
+            </Button>
+
+            {showParameters && (
+              <Stack gap={4}>
+                <Separator />
+
+                {/* A chooser is `Select`; its options are data. */}
+                <Field label={`Shape: ${shapeName}`}>
+                  {(id, describedBy) => (
+                    <Select
+                      id={id}
+                      describedBy={describedBy}
+                      value={String(parameters.shape)}
+                      onChange={(value) => setParameters((prev) => ({ ...prev, shape: parseInt(value) }))}
+                      options={[
+                        { value: "1", label: "Dot" },
+                        { value: "2", label: "Ellipse" },
+                        { value: "3", label: "Line" },
+                        { value: "4", label: "Square" },
+                      ]}
+                    />
+                  )}
+                </Field>
+
+                {/* A range is `Slider`, which hands over an array of values. Blend amount
+                    and the per-channel R/G/B rotations are this same labelled Slider,
+                    one per uniform. */}
+                <Stack gap={2}>
+                  <Text size="sm">Size: {parameters.radius.toFixed(1)}</Text>
+                  <Slider
+                    label="Size"
+                    min={1}
+                    max={25}
+                    step={0.5}
+                    value={[parameters.radius]}
+                    onChange={([radius]) => setParameters((prev) => ({ ...prev, radius }))}
+                  />
+                </Stack>
+
+                <Stack gap={2}>
+                  <Text size="sm">Scatter: {(parameters.scatter * 100).toFixed(0)}%</Text>
+                  <Slider
+                    label="Scatter"
+                    min={0}
+                    max={1}
+                    step={0.01}
+                    value={[parameters.scatter]}
+                    onChange={([scatter]) => setParameters((prev) => ({ ...prev, scatter }))}
+                  />
+                </Stack>
+
+                <Field label={`Blend Mode: ${blendModeName}`}>
+                  {(id, describedBy) => (
+                    <Select
+                      id={id}
+                      describedBy={describedBy}
+                      value={String(parameters.blendingMode)}
+                      onChange={(value) => setParameters((prev) => ({ ...prev, blendingMode: parseInt(value) }))}
+                      options={[
+                        { value: "1", label: "Linear" },
+                        { value: "2", label: "Multiply" },
+                        { value: "3", label: "Add" },
+                        { value: "4", label: "Lighter" },
+                        { value: "5", label: "Darker" },
+                      ]}
+                    />
+                  )}
+                </Field>
+
+                <Checkbox
+                  label="Greyscale"
+                  checked={parameters.greyscale}
+                  onChange={(checked) => setParameters((prev) => ({ ...prev, greyscale: checked === true }))}
                 />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="scatter">Scatter: {(parameters.scatter * 100).toFixed(0)}%</Label>
-                <input
-                  id="scatter"
-                  type="range"
-                  min="0"
-                  max="1"
-                  step="0.01"
-                  value={parameters.scatter}
-                  onChange={(e) => setParameters((prev) => ({ ...prev, scatter: parseFloat(e.target.value) }))}
-                  className="w-full"
+                <Checkbox
+                  label="Disable Effect"
+                  checked={parameters.disable}
+                  onChange={(checked) => setParameters((prev) => ({ ...prev, disable: checked === true }))}
                 />
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="blend-mode">Blend Mode: {blendModeName}</Label>
-                <Select
-                  value={String(parameters.blendingMode)}
-                  onValueChange={(value) => setParameters((prev) => ({ ...prev, blendingMode: parseInt(value) }))}
-                >
-                  <SelectTrigger id="blend-mode" className="w-full">
-                    <SelectValue />
-                  </SelectTrigger>
-                  <SelectContent>
-                    <SelectItem value="1">Linear</SelectItem>
-                    <SelectItem value="2">Multiply</SelectItem>
-                    <SelectItem value="3">Add</SelectItem>
-                    <SelectItem value="4">Lighter</SelectItem>
-                    <SelectItem value="5">Darker</SelectItem>
-                  </SelectContent>
-                </Select>
-              </div>
-
-              <div className="flex items-center gap-2">
-                <input id="greyscale" type="checkbox" checked={parameters.greyscale} onChange={(e) => setParameters((prev) => ({ ...prev, greyscale: e.target.checked }))} />
-                <Label htmlFor="greyscale">Greyscale</Label>
-              </div>
-              <div className="flex items-center gap-2">
-                <input id="disable" type="checkbox" checked={parameters.disable} onChange={(e) => setParameters((prev) => ({ ...prev, disable: e.target.checked }))} />
-                <Label htmlFor="disable">Disable Effect</Label>
-              </div>
-
-              <div className="space-y-2">
-                <Label htmlFor="preset-name">Preset name</Label>
-                <Input id="preset-name" placeholder="Preset name…" value={presetName} onChange={(e) => setPresetName(e.target.value)} className="w-full" />
-                <Button variant="secondary" className="w-full" onClick={savePreset} disabled={!presetName.trim()}>
-                  💾 Save Preset
+
+                <Field label="Preset name">
+                  {(id, describedBy) => (
+                    <Input id={id} describedBy={describedBy} placeholder="Preset name…" value={presetName} onChange={setPresetName} />
+                  )}
+                </Field>
+                <Button block variant="quiet" onClick={savePreset} disabled={!presetName.trim()}>
+                  Save Preset
                 </Button>
-              </div>
-
-              {/* A row that selects something is a `Button`, and which one is
-                  chosen is a `variant` — never a colour `className`. */}
-              {presets.length > 0 && (
-                <div className="space-y-2">
-                  <h4 className="font-bold">💾 Saved Presets</h4>
-                  {presets
-                    .sort((a, b) => b.timestamp - a.timestamp)
-                    .map((preset) => (
-                      <Button
-                        key={preset._id}
-                        variant={currentPreset?._id === preset._id ? "default" : "secondary"}
-                        className="w-full justify-start"
-                        onClick={() => loadPreset(preset)}
-                      >
-                        {preset.name} · {["", "Dot", "Ellipse", "Line", "Square"][preset.parameters.shape]}
-                      </Button>
-                    ))}
-                </div>
-              )}
-
-              {parameterHistory.length > 0 && (
-                <div className="space-y-2">
-                  <h4 className="font-bold">📜 Parameter History</h4>
-                  {parameterHistory
-                    .sort((a, b) => b.timestamp - a.timestamp)
-                    .slice(0, 10)
-                    .map((state) => (
-                      <Button key={state._id} variant="outline" className="w-full justify-start" onClick={() => loadParameterState(state)}>
-                        {actionNames[state.action] || "⚙️ Unknown"} · {new Date(state.timestamp).toLocaleTimeString()}
-                      </Button>
-                    ))}
-                </div>
-              )}
-            </div>
-          )}
-        </CardContent>
-      </Card>
+
+                {/* A row that selects something is a `RowCard`, and which one is
+                    chosen is its `selected` prop. */}
+                {presets.length > 0 && (
+                  <Stack gap={2}>
+                    <Heading level={3}>Saved Presets</Heading>
+                    {presets
+                      .sort((a, b) => b.timestamp - a.timestamp)
+                      .map((preset) => (
+                        <RowCard key={preset._id} selected={currentPreset?._id === preset._id} onClick={() => loadPreset(preset)}>
+                          {preset.name} · {["", "Dot", "Ellipse", "Line", "Square"][preset.parameters.shape]}
+                        </RowCard>
+                      ))}
+                  </Stack>
+                )}
+
+                {parameterHistory.length > 0 && (
+                  <Stack gap={2}>
+                    <Heading level={3}>Parameter History</Heading>
+                    {parameterHistory
+                      .sort((a, b) => b.timestamp - a.timestamp)
+                      .slice(0, 10)
+                      .map((state) => (
+                        <RowCard key={state._id} onClick={() => loadParameterState(state)}>
+                          {actionNames[state.action] || "Unknown"} · {new Date(state.timestamp).toLocaleTimeString()}
+                        </RowCard>
+                      ))}
+                  </Stack>
+                )}
+              </Stack>
+            )}
+          </Stack>
+        </Card>
+      </div>
     </div>
   );
 }