@vibes.diy/prompts 14.1.50 → 14.1.51

package/llms/three-js.md

@@ -1208,6 +1208,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";
 
 export default function SkyGlider() {
   const { database, useLiveQuery } = useFireproof("skyGliderScores");
@@ -1605,25 +1606,33 @@ export default function SkyGlider() {
   }, [initThreeJS, handleKeyDown, handleKeyUp, handleResize]);
 
   return (
-    <div className="relative h-screen w-full bg-sky-200">
+    <div className="relative h-screen w-full bg-background text-foreground font-sans">
       <canvas ref={canvasRef} className="absolute inset-0" />
-      <div className="absolute top-4 left-4 rounded-lg bg-card text-card-foreground p-4 shadow-md">
-        <h2 className="text-lg font-bold">Sky Glider</h2>
-        <p>Score: {currentScore}</p>
-        <p className="mt-2 text-sm">WASD/Arrows: Fly, Space: Thrust</p>
-      </div>
+      <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 && (
-        <div className="absolute top-4 right-4 rounded-lg bg-card text-card-foreground p-4 shadow-md">
-          <h3 className="font-bold">High Scores</h3>
-          {scoreData
-            .sort((a, b) => b.value - a.value)
-            .slice(0, 3)
-            .map((score, i) => (
-              <div key={score._id} className="text-sm">
-                #{i + 1}: {score.value}
-              </div>
-            ))}
-        </div>
+        <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>
+        </Card>
       )}
     </div>
   );
@@ -1640,6 +1649,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";
 
 export default function HalftoneArtStudio() {
   const { database, useLiveQuery } = useFireproof("halftoneStudio");
@@ -1994,292 +2005,145 @@ export default function HalftoneArtStudio() {
     <div className="relative h-screen w-full overflow-hidden bg-background text-foreground font-sans">
       <canvas ref={canvasRef} className="absolute inset-0" />
 
-      {/* Main Control Panel */}
-      <div
-        className={`absolute top-4 left-4 max-h-[calc(100vh-2rem)] overflow-y-auto rounded-lg bg-card text-card-foreground p-4 shadow-lg transition-all duration-300 ${showParameters ? "w-80" : "w-64"}`}
-      >
-        <h2 className="mb-4 text-lg font-bold text-card-foreground">RGB Halftone Studio</h2>
-
-        {/* Always visible controls */}
-        <div className="mb-4 space-y-3">
-          <button
-            onClick={generateRandomScene}
-            disabled={isGenerating}
-            className="w-full rounded-md bg-primary px-4 py-3 font-bold text-primary-foreground shadow-sm active:translate-y-px active:shadow-sm disabled:opacity-50"
-          >
-            {isGenerating ? "Generating..." : "🎲 Random Art"}
-          </button>
-
-          <button
-            onClick={() => setShowParameters(!showParameters)}
-            className="w-full rounded-md bg-secondary px-4 py-2 font-bold text-secondary-foreground shadow-sm active:translate-y-px active:shadow-sm"
-          >
+      {/* 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 className="space-y-4">
+          <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>
-        </div>
-
-        {/* Expandable parameter controls */}
-        {showParameters && (
-          <div className="space-y-4">
-            {/* Shape Controls */}
-            <div>
-              <label className="mb-2 block text-sm font-bold text-card-foreground">Shape: {shapeName}</label>
-              <select
-                value={parameters.shape}
-                onChange={(e) =>
-                  setParameters((prev) => ({
-                    ...prev,
-                    shape: parseInt(e.target.value),
-                  }))
-                }
-                className="w-full rounded-md border border-input p-2 text-card-foreground focus:ring-2 focus:ring-ring"
-              >
-                <option value={1}>Dot</option>
-                <option value={2}>Ellipse</option>
-                <option value={3}>Line</option>
-                <option value={4}>Square</option>
-              </select>
-            </div>
-
-            {/* Size Controls */}
-            <div>
-              <label className="mb-2 block text-sm font-bold text-card-foreground">Size: {parameters.radius.toFixed(1)}</label>
-              <input
-                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"
-              />
-            </div>
-
-            {/* Color Rotation */}
-            <div className="grid grid-cols-3 gap-2">
-              <div>
-                <label className="mb-1 block text-xs font-bold text-muted-foreground">Red: {parameters.rotateR.toFixed(0)}°</label>
-                <input
-                  type="range"
-                  min="0"
-                  max="90"
-                  value={parameters.rotateR}
-                  onChange={(e) =>
-                    setParameters((prev) => ({
-                      ...prev,
-                      rotateR: parseFloat(e.target.value),
-                    }))
-                  }
-                  className="w-full"
-                />
+          </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>
-              <div>
-                <label className="mb-1 block text-xs font-bold text-muted-foreground">Green: {parameters.rotateG.toFixed(0)}°</label>
+
+              {/* 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="0"
-                  max="90"
-                  value={parameters.rotateG}
-                  onChange={(e) =>
-                    setParameters((prev) => ({
-                      ...prev,
-                      rotateG: parseFloat(e.target.value),
-                    }))
-                  }
+                  min="1"
+                  max="25"
+                  step="0.5"
+                  value={parameters.radius}
+                  onChange={(e) => setParameters((prev) => ({ ...prev, radius: parseFloat(e.target.value) }))}
                   className="w-full"
                 />
               </div>
-              <div>
-                <label className="mb-1 block text-xs font-bold text-muted-foreground">Blue: {parameters.rotateB.toFixed(0)}°</label>
+
+              <div className="space-y-2">
+                <Label htmlFor="scatter">Scatter: {(parameters.scatter * 100).toFixed(0)}%</Label>
                 <input
+                  id="scatter"
                   type="range"
                   min="0"
-                  max="90"
-                  value={parameters.rotateB}
-                  onChange={(e) =>
-                    setParameters((prev) => ({
-                      ...prev,
-                      rotateB: parseFloat(e.target.value),
-                    }))
-                  }
+                  max="1"
+                  step="0.01"
+                  value={parameters.scatter}
+                  onChange={(e) => setParameters((prev) => ({ ...prev, scatter: parseFloat(e.target.value) }))}
                   className="w-full"
                 />
               </div>
-            </div>
-
-            {/* Effects */}
-            <div>
-              <label className="mb-2 block text-sm font-bold text-card-foreground">
-                Scatter: {(parameters.scatter * 100).toFixed(0)}%
-              </label>
-              <input
-                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"
-              />
-            </div>
 
-            <div>
-              <label className="mb-2 block text-sm font-bold text-card-foreground">
-                Blend: {(parameters.blending * 100).toFixed(0)}%
-              </label>
-              <input
-                type="range"
-                min="0"
-                max="1"
-                step="0.01"
-                value={parameters.blending}
-                onChange={(e) =>
-                  setParameters((prev) => ({
-                    ...prev,
-                    blending: parseFloat(e.target.value),
-                  }))
-                }
-                className="w-full"
-              />
-            </div>
-
-            <div>
-              <label className="mb-2 block text-sm font-bold text-card-foreground">Blend Mode: {blendModeName}</label>
-              <select
-                value={parameters.blendingMode}
-                onChange={(e) =>
-                  setParameters((prev) => ({
-                    ...prev,
-                    blendingMode: parseInt(e.target.value),
-                  }))
-                }
-                className="w-full rounded-md border border-input p-2 text-card-foreground focus:ring-2 focus:ring-ring"
-              >
-                <option value={1}>Linear</option>
-                <option value={2}>Multiply</option>
-                <option value={3}>Add</option>
-                <option value={4}>Lighter</option>
-                <option value={5}>Darker</option>
-              </select>
-            </div>
-
-            {/* Toggles */}
-            <div className="space-y-2">
-              <label className="flex items-center">
-                <input
-                  type="checkbox"
-                  checked={parameters.greyscale}
-                  onChange={(e) =>
-                    setParameters((prev) => ({
-                      ...prev,
-                      greyscale: e.target.checked,
-                    }))
-                  }
-                  className="mr-2"
-                />
-                <span className="text-sm font-bold text-card-foreground">Greyscale</span>
-              </label>
-
-              <label className="flex items-center">
-                <input
-                  type="checkbox"
-                  checked={parameters.disable}
-                  onChange={(e) =>
-                    setParameters((prev) => ({
-                      ...prev,
-                      disable: e.target.checked,
-                    }))
-                  }
-                  className="mr-2"
-                />
-                <span className="text-sm font-bold text-card-foreground">Disable Effect</span>
-              </label>
-            </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>
 
-            {/* Save Preset */}
-            <div>
-              <input
-                type="text"
-                placeholder="Preset name..."
-                value={presetName}
-                onChange={(e) => setPresetName(e.target.value)}
-                className="mb-2 w-full rounded-md border border-input p-2 text-card-foreground focus:ring-2 focus:ring-ring"
-              />
-              <button
-                onClick={savePreset}
-                disabled={!presetName.trim()}
-                className="w-full rounded-md bg-accent px-4 py-2 font-bold text-accent-foreground shadow-sm active:translate-y-px active:shadow-sm disabled:opacity-50"
-              >
-                💾 Save Preset
-              </button>
-            </div>
+              <Label className="flex items-center gap-2">
+                <input type="checkbox" checked={parameters.greyscale} onChange={(e) => setParameters((prev) => ({ ...prev, greyscale: e.target.checked }))} />
+                Greyscale
+              </Label>
+              <Label className="flex items-center gap-2">
+                <input type="checkbox" checked={parameters.disable} onChange={(e) => setParameters((prev) => ({ ...prev, disable: e.target.checked }))} />
+                Disable Effect
+              </Label>
+
+              <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
+                </Button>
+              </div>
 
-            {/* Saved Presets */}
-            {presets.length > 0 && (
-              <div>
-                <h4 className="mb-2 text-sm font-bold text-card-foreground">💾 Saved Presets</h4>
-                <div className="max-h-32 space-y-2 overflow-y-auto">
+              {/* 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) => (
-                      <div
+                      <Button
                         key={preset._id}
-                        className={`cursor-pointer rounded-md p-3 transition-colors ${
-                          currentPreset?._id === preset._id
-                            ? "bg-primary text-primary-foreground shadow-sm"
-                            : "bg-card text-card-foreground shadow-sm"
-                        }`}
+                        variant={currentPreset?._id === preset._id ? "default" : "secondary"}
+                        className="w-full justify-start"
                         onClick={() => loadPreset(preset)}
                       >
-                        <div className="text-xs font-bold text-card-foreground">{preset.name}</div>
-                        <div className="text-xs text-card-foreground opacity-75">
-                          {["", "Dot", "Ellipse", "Line", "Square"][preset.parameters.shape]} •{" "}
-                          {preset.parameters.greyscale ? "B&W" : "Color"}
-                        </div>
-                      </div>
+                        {preset.name} · {["", "Dot", "Ellipse", "Line", "Square"][preset.parameters.shape]}
+                      </Button>
                     ))}
                 </div>
-              </div>
-            )}
+              )}
 
-            {/* Parameter History */}
-            {parameterHistory.length > 0 && (
-              <div>
-                <h4 className="mb-2 text-sm font-bold text-card-foreground">📜 Parameter History</h4>
-                <div className="max-h-40 space-y-2 overflow-y-auto">
+              {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) => (
-                      <div
-                        key={state._id}
-                        className="cursor-pointer rounded-md bg-card text-card-foreground p-3 shadow-sm transition-shadow hover:shadow-md"
-                        onClick={() => loadParameterState(state)}
-                      >
-                        <div className="text-xs font-bold text-card-foreground">{actionNames[state.action] || "⚙️ Unknown"}</div>
-                        <div className="text-xs text-card-foreground opacity-75">
-                          {["", "Dot", "Ellipse", "Line", "Square"][state.parameters.shape]} • Size:{" "}
-                          {state.parameters.radius.toFixed(1)} • {state.parameters.greyscale ? "B&W" : "Color"}
-                        </div>
-                        <div className="text-xs text-card-foreground opacity-50">{new Date(state.timestamp).toLocaleTimeString()}</div>
-                      </div>
+                      <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>
-            )}
-          </div>
-        )}
-      </div>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
     </div>
   );
 }

package/llms/use-vibe.initial.md

@@ -28,6 +28,7 @@ Gate every write affordance on `can.*`. Hold it while `pending`, and write your
 
 ```jsx
 import { useVibe } from "use-vibes";
+import { Button, Input, Skeleton } from "@vibes.diy/look";
 
 function PromptBar({ database, boardId }) {
   const { can, me } = useVibe("aestheticBoard");
@@ -35,15 +36,15 @@ function PromptBar({ database, boardId }) {
   // to, and who is writing it.
   const v = can.create({ type: "tile", boardId, authorHandle: me?.userHandle });
   // 1. still resolving — a quiet placeholder, no refusal wording, no empty hole
-  if (v.pending) return <div className="skeleton" aria-busy="true">Checking…</div>;
+  if (v.pending) return <Skeleton className="h-10 w-full" aria-busy="true" />;
   // 2. resolved denial — your words, informed by v.reason, never v.reason itself
-  if (!v.ok) return <p className="muted">Sign in to add a tile.</p>;
+  if (!v.ok) return <p className="text-muted-foreground">Sign in to add a tile.</p>;
   // 3. allowed
   return (
     <form onSubmit={/* … */}>
       {/* no current-user pill — identity + sign-in live in the Vibes Switch (the logo) */}
-      <input placeholder="Add a tile…" />
-      <button type="submit">Post</button>
+      <Input placeholder="Add a tile…" />
+      <Button type="submit">Post</Button>
     </form>
   );
 }

package/llms/use-vibe.md

@@ -28,14 +28,15 @@ Gate every write affordance on `can.*`. Hold it while `pending`, and write your
 
 ```jsx file=App.jsx
 import { useVibe } from "use-vibes";
+import { Button, Input, Skeleton } from "@vibes.diy/look";
 
 function PromptBar({ database }) {
   const { can, me } = useVibe("aestheticBoard");
   const v = can.create({ type: "tile", authorHandle: me?.userHandle });
   // 1. still resolving — a quiet placeholder, no refusal wording, no empty hole
-  if (v.pending) return <div className="skeleton" aria-busy="true">Checking…</div>;
+  if (v.pending) return <Skeleton className="h-10 w-full" aria-busy="true" />;
   // 2. resolved denial — your words, informed by v.reason, never v.reason itself
-  if (!v.ok) return <p className="muted">Join the board to add a tile.</p>;
+  if (!v.ok) return <p className="text-muted-foreground">Join the board to add a tile.</p>;
   // 3. allowed
   return (
     <form
@@ -45,8 +46,8 @@ function PromptBar({ database }) {
       }}
     >
       {/* no current-user pill — identity + sign-in live in the Vibes Switch (the logo) */}
-      <input name="tile" placeholder="Add a tile…" />
-      <button type="submit">Post</button>
+      <Input name="tile" placeholder="Add a tile…" />
+      <Button type="submit">Post</Button>
     </form>
   );
 }

package/llms/voxel.md

@@ -269,11 +269,16 @@ and only request lock from that click:
 {worldReady && !isTouch && !locked && (
   <button onClick={() => engineRef.current?.requestLock()}
     className="absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/55 backdrop-blur-sm">
-    <div className="panel">
-      <h2>Voxel World</h2><p>Click to play</p>
-      {/* WASD move · Mouse look · Shift sprint · Space jump · Left-click break · Right-click place · F fly · 1–9 blocks */}
-    </div>
-    <p className="text-xs opacity-60">Press Esc to release the mouse</p>
+    <Card className="max-w-sm">
+      <CardHeader>
+        <CardTitle>Voxel World</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <p>Click to play</p>
+        {/* WASD move · Mouse look · Shift sprint · Space jump · Left-click break · Right-click place · F fly · 1–9 blocks */}
+      </CardContent>
+    </Card>
+    <p className="mt-4 text-muted-foreground">Press Esc to release the mouse</p>
   </button>
 )}
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibes.diy/prompts",
-  "version": "14.1.50",
+  "version": "14.1.51",
   "type": "module",
   "main": "./index.js",
   "exports": {
@@ -13,7 +13,8 @@
     "./themes/looks/index.js": "./themes/looks/index.js",
     "./themes/ornament-pad.js": "./themes/ornament-pad.js",
     "./themes/palette-gen.js": "./themes/palette-gen.js",
-    "./themes/style-presets.js": "./themes/style-presets.js"
+    "./themes/style-presets.js": "./themes/style-presets.js",
+    "./themes/theme-slugs.js": "./themes/theme-slugs.js"
   },
   "description": "",
   "scripts": {
@@ -36,9 +37,9 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@adviser/cement": "~0.5.34",
-    "@vibes.diy/call-ai-v2": "14.1.50",
-    "@vibes.diy/identity": "14.1.50",
-    "@vibes.diy/use-vibes-types": "14.1.50",
+    "@vibes.diy/call-ai-v2": "14.1.51",
+    "@vibes.diy/identity": "14.1.51",
+    "@vibes.diy/use-vibes-types": "14.1.51",
     "arktype": "~2.2.3",
     "json-schema-faker": "~0.6.3"
   },

package/prompts.d.ts

@@ -129,9 +129,7 @@ export interface MakeBaseSystemPromptOptions {
     pkgBaseUrl?: string;
     variant?: "initial" | "initial-oneshot" | "continuation";
     suppressDefaultStylePrompt?: boolean;
-    look?: {
-        components: boolean;
-    };
+    look?: boolean;
 }
 export declare function makeBaseSystemPrompt(model: string, sessionDoc: Partial<UserSettings> & MakeBaseSystemPromptOptions): Promise<SystemPromptResult>;
 export declare function getRecoveryAddendum(pkgBaseUrl?: string, fetchFn?: typeof fetch): Promise<string>;