@vibes.diy/prompts 14.1.40 → 14.1.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/generation-variety.d.ts +16 -3
- package/generation-variety.js +26 -24
- package/generation-variety.js.map +1 -1
- package/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/llms/access.md +1 -1
- package/llms/backend.md +5 -5
- package/llms/create-vibe.md +2 -2
- package/llms/fireproof.initial.md +24 -24
- package/llms/fireproof.md +24 -24
- package/llms/p5.md +6 -7
- package/llms/three-js.md +32 -41
- package/llms/use-viewer.initial.md +1 -1
- package/llms/use-viewer.md +1 -1
- package/llms/webxr.md +5 -5
- package/package.json +6 -4
- package/prompts.d.ts +4 -0
- package/prompts.js +47 -16
- package/prompts.js.map +1 -1
- package/style-prompts.js +1 -1
- package/system-prompt-initial-oneshot.md +10 -9
- package/system-prompt-initial.md +10 -9
- package/system-prompt.md +34 -28
- package/themes/color-math.d.ts +42 -0
- package/themes/color-math.js +184 -0
- package/themes/color-math.js.map +1 -0
- package/themes/colors/house.yaml +57 -0
- package/themes/colors/mesh.yaml +0 -1
- package/themes/colors/orbit.yaml +0 -1
- package/themes/colors/rift.yaml +0 -1
- package/themes/colorsets-bundle.js +64 -3
- package/themes/colorsets-bundle.js.map +1 -1
- package/themes/colorsets.d.ts +16 -0
- package/themes/colorsets.js +178 -24
- package/themes/colorsets.js.map +1 -1
- package/themes/fonts.d.ts +1 -0
- package/themes/fonts.js +23 -0
- package/themes/fonts.js.map +1 -1
- package/themes/house.md +174 -0
- package/themes/index.d.ts +1 -1
- package/themes/index.js +8 -1
- package/themes/index.js.map +1 -1
- package/themes/looks/house/brief.md +43 -0
- package/themes/looks/house/variety.d.ts +3 -0
- package/themes/looks/house/variety.js +35 -0
- package/themes/looks/house/variety.js.map +1 -0
- package/themes/looks/index.d.ts +15 -0
- package/themes/looks/index.js +68 -0
- package/themes/looks/index.js.map +1 -0
- package/themes/palette-gen.d.ts +1 -39
- package/themes/palette-gen.js +7 -181
- package/themes/palette-gen.js.map +1 -1
- package/themes/style-presets.js +10 -0
- package/themes/style-presets.js.map +1 -1
package/generation-variety.d.ts
CHANGED
|
@@ -8,6 +8,16 @@ export interface Flourish {
|
|
|
8
8
|
}
|
|
9
9
|
export declare const LAYOUT_ARCHETYPES: readonly LayoutArchetype[];
|
|
10
10
|
export declare const FLOURISHES: readonly Flourish[];
|
|
11
|
+
export interface LookVarietyDialect {
|
|
12
|
+
readonly excludedFlourishes: readonly string[];
|
|
13
|
+
readonly archetypeGuidance: Readonly<Record<string, string>>;
|
|
14
|
+
readonly flourishGuidance: Readonly<Record<string, string>>;
|
|
15
|
+
readonly framing: {
|
|
16
|
+
readonly archetypeCoda: string;
|
|
17
|
+
readonly flourishIntro: string;
|
|
18
|
+
readonly flourishCoda: string;
|
|
19
|
+
};
|
|
20
|
+
}
|
|
11
21
|
export declare const FLOURISH_DRAW_COUNT = 3;
|
|
12
22
|
export interface GenerationVariety {
|
|
13
23
|
readonly archetype: string;
|
|
@@ -31,8 +41,11 @@ export type VarietyPinCheck = {
|
|
|
31
41
|
};
|
|
32
42
|
export declare function validateVarietyPin(candidate: unknown): VarietyPinCheck;
|
|
33
43
|
export declare function parseVarietyPin(spec: string): VarietyPinCheck;
|
|
34
|
-
export declare function
|
|
35
|
-
|
|
36
|
-
|
|
44
|
+
export declare function drawGenerationVariety(rnd: () => number, pin?: VarietyPin, opts?: {
|
|
45
|
+
readonly flourishPool?: readonly string[];
|
|
46
|
+
}): GenerationVariety;
|
|
47
|
+
export declare function renderVarietySection(variety: Partial<GenerationVariety>, opts?: {
|
|
48
|
+
readonly dialect?: LookVarietyDialect;
|
|
49
|
+
}): string;
|
|
37
50
|
export declare function renderVarietyContextForPreAlloc(variety: Partial<GenerationVariety>): string;
|
|
38
51
|
export declare function renderTextureNoteSection(note: string | undefined): string;
|
package/generation-variety.js
CHANGED
|
@@ -23,43 +23,43 @@ export const LAYOUT_ARCHETYPES = [
|
|
|
23
23
|
export const FLOURISHES = [
|
|
24
24
|
{
|
|
25
25
|
id: "hover-lift",
|
|
26
|
-
guidance: "Interactive surfaces — buttons, tappable rows, cards — rest at `shadow-
|
|
26
|
+
guidance: "Interactive surfaces — buttons, tappable rows, cards — rest at `shadow-md` and POP FORWARD on pointer hover: `hover:shadow-lg` plus `hover:-translate-x-px hover:-translate-y-px`, snapping back on leave. Snap, don't drift — the whole move resolves in well under 200ms. Hover is decoration only: every affordance stays complete and reachable with no pointer in the room at all.",
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
id: "press-slam",
|
|
30
|
-
guidance: "Interactive elements rest at `shadow-
|
|
30
|
+
guidance: "Interactive elements rest at `shadow-md` and answer `:active` by SLAMMING back down into the page: `active:shadow-none` plus `active:translate-x-px active:translate-y-px`. Under 150ms, with no easing curve long enough to notice — a press should feel like a key bottoming out, never like a fade.",
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
id: "accent-rule",
|
|
34
|
-
guidance: "Every section heading is preceded by a short, blunt bar in `bg-
|
|
34
|
+
guidance: "Every section heading is preceded by a short, blunt bar in `bg-accent` — `h-1 w-8`, squared off — sitting immediately before or beneath the heading text. Same bar, same place, every heading: a rule that wanders is noise, and once the others have one, the heading that doesn't looks broken.",
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
37
|
id: "signal-bar",
|
|
38
|
-
guidance: "Across the top edge of the app's most prominent surface — whatever the archetype actually built as its main block — lay a full-width bar split into FOUR equal segments, left to right: `bg-
|
|
38
|
+
guidance: "Across the top edge of the app's most prominent surface — whatever the archetype actually built as its main block — lay a full-width bar split into FOUR equal segments, left to right: `bg-success`, `bg-warning`, `bg-destructive`, `bg-accent`, at `h-1` so it reads as a graphic band and not a hairline. Four segments, equal widths, that order, always. DON'T blend them into a gradient, DON'T recolour them to match content, and DON'T put a second one anywhere in the app — one bar is a signature, two is wallpaper.",
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
id: "signal-states",
|
|
42
|
-
guidance: "Status is carried by the four signal roles and by nothing else, identically everywhere in the app:
|
|
42
|
+
guidance: "Status is carried by the four signal roles and by nothing else, identically everywhere in the app: `success` for done/on/healthy, `warning` for pending/needs-attention, `destructive` for failed/destructive, `accent` for informational or selected — each one a plain utility (`bg-success`, `text-success-foreground`), never an arbitrary value. Carry it as a MARK beside the words, never as a fill under them — a small solid square in `bg-success` at `size-2` immediately before the status word, or a leading edge on the whole item in `border-l-4 border-destructive` — while the words themselves keep the app's ordinary text colour on its ordinary surface. DON'T invent a fifth status colour, DON'T spend a signal role on decoration, DON'T let one state wear two different colours in two different views, and DON'T set type on top of a signal fill: these are strong colours picked to be seen across a room, not backgrounds vetted to carry small text.",
|
|
43
43
|
},
|
|
44
44
|
{
|
|
45
45
|
id: "bold-stroke",
|
|
46
|
-
guidance: "Every surface that holds content — the outer container, each repeated item, every input — is outlined on all four sides with `border
|
|
46
|
+
guidance: "Every surface that holds content — the outer container, each repeated item, every input — is outlined on all four sides with `border border-border` at full strength. A surface is either drawn or it isn't: no half-opacity edges, no soft fade standing in for a stroke, and never a background tint alone left to say where a thing ends.",
|
|
47
47
|
},
|
|
48
48
|
{
|
|
49
49
|
id: "slab-heading",
|
|
50
|
-
guidance: "Headings hit hard. Top-level headings take `font-
|
|
50
|
+
guidance: "Headings hit hard. Top-level headings take `font-sans font-bold tracking-tight`, set two Tailwind steps above body copy (`text-2xl` against `text-base`) and aligned flush to the left edge of their container; sub-headings sit one clear step down. Never two headings at the same weight in one view — a hierarchy the reader has to work out is not a hierarchy.",
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
id: "caps-label",
|
|
54
|
-
guidance: "Small labels standing on the page or on a plain surface — section eyebrows, column headers, table headings, field labels, metadata captions — are UPPERCASE, set with `tracking-
|
|
54
|
+
guidance: "Small labels standing on the page or on a plain surface — section eyebrows, column headers, table headings, field labels, metadata captions — are UPPERCASE, set with `tracking-wide` in `text-muted-foreground`, one Tailwind size below body copy. The CASE treatment carries into text sitting on a filled control (a button, a coloured chip), but the colour does not: that text keeps whatever foreground the control already gives it, because a fill was never vetted to carry type. Labels only, either way — body copy, headings and anything a person typed stay exactly as written. Shouting a paragraph is not a style.",
|
|
55
55
|
},
|
|
56
56
|
{
|
|
57
57
|
id: "focus-halo",
|
|
58
|
-
guidance: "Focusable controls take a visible `focus-visible` ring
|
|
58
|
+
guidance: "Focusable controls take a visible `focus-visible` ring — `focus-visible:ring-2 focus-visible:ring-ring` — clearly distinct from their resting border — a keyboard gets the same clarity a pointer gets for free. EVERY focusable control, not a chosen few, and never `outline-none` without putting something back.",
|
|
59
59
|
},
|
|
60
60
|
{
|
|
61
61
|
id: "mono-numerals",
|
|
62
|
-
guidance: "Anything a reader compares against another value — counts, dates, times, durations, amounts, ids — is set in `font-
|
|
62
|
+
guidance: "Anything a reader compares against another value — counts, dates, times, durations, amounts, ids — is set in `font-mono` so digits stack in a column and the eye can scan down them. Prose keeps the body face. This is for data, not for atmosphere: don't monospace a sentence because it looks technical.",
|
|
63
63
|
},
|
|
64
64
|
{
|
|
65
65
|
id: "item-stagger",
|
|
@@ -67,11 +67,11 @@ export const FLOURISHES = [
|
|
|
67
67
|
},
|
|
68
68
|
{
|
|
69
69
|
id: "quiet-metadata",
|
|
70
|
-
guidance: "Secondary information — timestamps, authorship, counts, source labels — sits in `text-
|
|
70
|
+
guidance: "Secondary information — timestamps, authorship, counts, source labels — sits in `text-muted-foreground` one Tailwind size below body copy, on its own line beneath the thing it describes, never competing with the primary line for the same glance. The restraint is the effect: the primary line only reads as loud because everything around it agreed to be quiet.",
|
|
71
71
|
},
|
|
72
72
|
{
|
|
73
73
|
id: "inset-divider",
|
|
74
|
-
guidance: "Wherever sibling items stack vertically, separate them with a hairline in `border-
|
|
74
|
+
guidance: "Wherever sibling items stack vertically, separate them with a hairline in `border-b border-border`, inset to the container's own horizontal padding rather than bleeding to the full edge. One divider BETWEEN items — never above the first, never below the last, and never a divider doing a job a gap could do.",
|
|
75
75
|
},
|
|
76
76
|
];
|
|
77
77
|
export const FLOURISH_DRAW_COUNT = 3;
|
|
@@ -132,21 +132,15 @@ export function parseVarietyPin(spec) {
|
|
|
132
132
|
.filter((f) => f.length > 0),
|
|
133
133
|
});
|
|
134
134
|
}
|
|
135
|
-
export function validVarietyPinOrUndefined(candidate) {
|
|
136
|
-
if (candidate === undefined || candidate === null)
|
|
137
|
-
return undefined;
|
|
138
|
-
const checked = validateVarietyPin(candidate);
|
|
139
|
-
return checked.ok ? checked.pin : undefined;
|
|
140
|
-
}
|
|
141
135
|
function pickIndex(rnd, length) {
|
|
142
136
|
const raw = Math.floor(rnd() * length);
|
|
143
137
|
return raw >= length ? length - 1 : raw;
|
|
144
138
|
}
|
|
145
|
-
export function drawGenerationVariety(rnd, pin) {
|
|
139
|
+
export function drawGenerationVariety(rnd, pin, opts) {
|
|
146
140
|
if (pin !== undefined)
|
|
147
141
|
return { archetype: pin.archetype, flourishes: [...pin.flourishes] };
|
|
148
142
|
const archetype = LAYOUT_ARCHETYPES[pickIndex(rnd, LAYOUT_ARCHETYPES.length)].id;
|
|
149
|
-
const pool = FLOURISHES.map((f) => f.id);
|
|
143
|
+
const pool = (opts?.flourishPool ?? FLOURISHES.map((f) => f.id)).filter((id) => FLOURISHES.some((f) => f.id === id));
|
|
150
144
|
const flourishes = [];
|
|
151
145
|
const count = FLOURISH_DRAW_COUNT > pool.length ? pool.length : FLOURISH_DRAW_COUNT;
|
|
152
146
|
while (flourishes.length < count) {
|
|
@@ -154,7 +148,8 @@ export function drawGenerationVariety(rnd, pin) {
|
|
|
154
148
|
}
|
|
155
149
|
return { archetype, flourishes };
|
|
156
150
|
}
|
|
157
|
-
export function renderVarietySection(variety) {
|
|
151
|
+
export function renderVarietySection(variety, opts) {
|
|
152
|
+
const dialect = opts?.dialect;
|
|
158
153
|
const archetype = LAYOUT_ARCHETYPES.find((a) => a.id === variety.archetype);
|
|
159
154
|
const drawn = variety.flourishes ?? [];
|
|
160
155
|
const flourishes = FLOURISHES.filter((f) => drawn.includes(f.id));
|
|
@@ -162,11 +157,18 @@ export function renderVarietySection(variety) {
|
|
|
162
157
|
return "";
|
|
163
158
|
const parts = [];
|
|
164
159
|
if (archetype !== undefined) {
|
|
165
|
-
|
|
160
|
+
const guidance = dialect?.archetypeGuidance[archetype.id] ?? archetype.guidance;
|
|
161
|
+
const coda = dialect?.framing.archetypeCoda ??
|
|
162
|
+
"This is THIS app's structural shape. Build the whole app inside it; do not blend two archetypes, and do not fall back to a desktop shape that a phone has to recover from.";
|
|
163
|
+
parts.push(`## Layout archetype — ${archetype.id}\n\n${guidance}\n\n${coda}`);
|
|
166
164
|
}
|
|
167
165
|
if (flourishes.length > 0) {
|
|
168
|
-
const bullets = flourishes.map((f) => `- **${f.id}** — ${f.guidance}`).join("\n");
|
|
169
|
-
|
|
166
|
+
const bullets = flourishes.map((f) => `- **${f.id}** — ${dialect?.flourishGuidance[f.id] ?? f.guidance}`).join("\n");
|
|
167
|
+
const intro = dialect?.framing.flourishIntro ??
|
|
168
|
+
"Apply these — and no other decorative treatment — everywhere their affordance occurs, with no exceptions and no half-measures. A flourish applied to three of five places doesn't read as restraint, it reads as a bug:";
|
|
169
|
+
const coda = dialect?.framing.flourishCoda ??
|
|
170
|
+
"Every flourish above is written in plain Tailwind utilities on purpose — each one already resolves to this theme's own token at paint time. Never swap a utility for a literal colour, shadow or size, and never for an arbitrary-value bracket such as `shadow-[var(--vibes-shadow)]`: the owner restyles the app by changing tokens, and a value frozen in a hover or focus state survives that change invisibly.";
|
|
171
|
+
parts.push(`## Flourishes\n\n${intro}\n\n${bullets}\n\n${coda}`);
|
|
170
172
|
}
|
|
171
173
|
return parts.join("\n\n");
|
|
172
174
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generation-variety.js","sourceRoot":"","sources":["../jsr/generation-variety.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"generation-variety.js","sourceRoot":"","sources":["../jsr/generation-variety.ts"],"names":[],"mappings":"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"}
|
package/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export * from "./view-state.js";
|
|
|
7
7
|
export * from "./style-prompts.js";
|
|
8
8
|
export * from "./restyle.js";
|
|
9
9
|
export * from "./themes/index.js";
|
|
10
|
+
export * from "./themes/looks/index.js";
|
|
10
11
|
export { parseContent } from "./segment-parser.js";
|
|
11
12
|
export { normalizeComponentExports, transformImports, coreImportMap } from "./component-transforms.js";
|
|
12
13
|
export { buildSchemaSystemMessage, schemaSystemMessageText } from "./build-schema-prompt.js";
|
package/index.js
CHANGED
|
@@ -7,6 +7,7 @@ export * from "./view-state.js";
|
|
|
7
7
|
export * from "./style-prompts.js";
|
|
8
8
|
export * from "./restyle.js";
|
|
9
9
|
export * from "./themes/index.js";
|
|
10
|
+
export * from "./themes/looks/index.js";
|
|
10
11
|
export { parseContent } from "./segment-parser.js";
|
|
11
12
|
export { normalizeComponentExports, transformImports, coreImportMap } from "./component-transforms.js";
|
|
12
13
|
export { buildSchemaSystemMessage, schemaSystemMessageText } from "./build-schema-prompt.js";
|
package/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../jsr/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEvG,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAI7F,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../jsr/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,yBAAyB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEvG,OAAO,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,MAAM,0BAA0B,CAAC;AAI7F,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}
|
package/llms/access.md
CHANGED
|
@@ -606,7 +606,7 @@ export default function App() {
|
|
|
606
606
|
<button type="submit">Post</button>
|
|
607
607
|
</form>
|
|
608
608
|
) : (
|
|
609
|
-
viewer && <p
|
|
609
|
+
viewer && <p className="text-muted-foreground">{canPost.reason}</p>
|
|
610
610
|
)}
|
|
611
611
|
|
|
612
612
|
{/* owner-only management — gated on can.* */}
|
package/llms/backend.md
CHANGED
|
@@ -553,20 +553,20 @@ export default function App() {
|
|
|
553
553
|
const status = statusDocs.find((doc) => doc._id === "refresh:status");
|
|
554
554
|
|
|
555
555
|
return (
|
|
556
|
-
<main className="mx-auto max-w-2xl p-6">
|
|
556
|
+
<main className="min-h-screen bg-background text-foreground font-sans mx-auto max-w-2xl p-6">
|
|
557
557
|
<h1 className="text-3xl font-bold">Node.js releases</h1>
|
|
558
558
|
{status?.state === "egress-denied" && (
|
|
559
|
-
<p role="status" className="my-4 rounded bg-
|
|
559
|
+
<p role="status" className="my-4 rounded-md bg-secondary text-secondary-foreground p-3 shadow-sm">
|
|
560
560
|
showing saved data — live refresh unavailable
|
|
561
561
|
</p>
|
|
562
562
|
)}
|
|
563
563
|
<ul className="mt-6 space-y-3">
|
|
564
564
|
{releases.map((release) => (
|
|
565
|
-
<li key={release._id} className="rounded
|
|
566
|
-
<a className="font-
|
|
565
|
+
<li key={release._id} className="rounded-md bg-card text-card-foreground p-3 shadow-sm">
|
|
566
|
+
<a className="font-bold underline" href={release.url} target="_blank" rel="noreferrer">
|
|
567
567
|
{release.title}
|
|
568
568
|
</a>
|
|
569
|
-
<time className="ml-3 text-sm text-
|
|
569
|
+
<time className="ml-3 text-sm text-muted-foreground">{release.publishedAt.slice(0, 10)}</time>
|
|
570
570
|
</li>
|
|
571
571
|
))}
|
|
572
572
|
</ul>
|
package/llms/create-vibe.md
CHANGED
|
@@ -29,7 +29,7 @@ import React from "react";
|
|
|
29
29
|
import { createVibe } from "use-vibes";
|
|
30
30
|
|
|
31
31
|
export default function App() {
|
|
32
|
-
const c = { btn: "min-h-
|
|
32
|
+
const c = { btn: "min-h-11 px-5 rounded-md bg-primary text-primary-foreground shadow-sm active:translate-y-px active:shadow-sm" };
|
|
33
33
|
// `ready` + `spec` come from the interview (see the full example below).
|
|
34
34
|
return (
|
|
35
35
|
<button
|
|
@@ -88,7 +88,7 @@ export default function App() {
|
|
|
88
88
|
}
|
|
89
89
|
}
|
|
90
90
|
|
|
91
|
-
const c = { btn: "min-h-
|
|
91
|
+
const c = { btn: "min-h-11 px-5 rounded-md bg-primary text-primary-foreground shadow-sm active:translate-y-px active:shadow-sm" };
|
|
92
92
|
return (
|
|
93
93
|
<main id="app">
|
|
94
94
|
{/* ...interview... */}
|
|
@@ -496,36 +496,36 @@ export default function App() {
|
|
|
496
496
|
};
|
|
497
497
|
|
|
498
498
|
const c = {
|
|
499
|
-
|
|
500
|
-
card: "bg-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
499
|
+
page: "bg-background text-foreground font-sans",
|
|
500
|
+
card: "bg-card text-card-foreground",
|
|
501
|
+
field: "border border-input rounded-md focus:ring-2 focus:ring-ring",
|
|
502
|
+
action: "bg-primary text-primary-foreground active:translate-y-px active:shadow-sm",
|
|
503
|
+
meta: "text-muted-foreground",
|
|
504
504
|
};
|
|
505
505
|
|
|
506
506
|
return (
|
|
507
|
-
<div className={`p-6 max-w-lg mx-auto ${c.
|
|
507
|
+
<div className={`min-h-screen p-6 max-w-lg mx-auto ${c.page}`}>
|
|
508
508
|
<h2 className="text-2xl font-bold mb-4">Image Uploader</h2>
|
|
509
509
|
<form onSubmit={onSubmit} className="space-y-3">
|
|
510
|
-
<input type="file" accept="image/*" onChange={onPickFile} className={`w-full ${c.
|
|
510
|
+
<input type="file" accept="image/*" onChange={onPickFile} className={`w-full ${c.field} p-2`} />
|
|
511
511
|
<input
|
|
512
512
|
type="text"
|
|
513
513
|
placeholder="Caption"
|
|
514
514
|
value={doc.caption}
|
|
515
515
|
onChange={(e) => merge({ caption: e.target.value })}
|
|
516
|
-
className={`w-full ${c.
|
|
516
|
+
className={`w-full ${c.field} p-2`}
|
|
517
517
|
/>
|
|
518
|
-
<button type="submit" className={`px-4 py-2 ${c.
|
|
518
|
+
<button type="submit" className={`px-4 py-2 rounded-md shadow-sm ${c.action}`}>
|
|
519
519
|
Upload
|
|
520
520
|
</button>
|
|
521
521
|
</form>
|
|
522
522
|
|
|
523
|
-
<h3 className="text-lg font-
|
|
523
|
+
<h3 className="text-lg font-bold mt-8">Recent Uploads</h3>
|
|
524
524
|
<div className="grid grid-cols-2 gap-4 mt-2">
|
|
525
525
|
{docs.map((d) => (
|
|
526
|
-
<div key={d._id} className={
|
|
527
|
-
{d._files?.photo?.url && <img src={d._files.photo.url} alt={d.caption || "upload"} className="w-full h-auto rounded" />}
|
|
528
|
-
<p className={`text-sm ${c.
|
|
526
|
+
<div key={d._id} className={`p-3 rounded-md shadow-sm ${c.card}`}>
|
|
527
|
+
{d._files?.photo?.url && <img src={d._files.photo.url} alt={d.caption || "upload"} className="w-full h-auto rounded-md" />}
|
|
528
|
+
<p className={`text-sm ${c.meta} mt-2`}>{d.caption || "No caption"}</p>
|
|
529
529
|
</div>
|
|
530
530
|
))}
|
|
531
531
|
</div>
|
|
@@ -645,23 +645,23 @@ export default function App() {
|
|
|
645
645
|
|
|
646
646
|
// 3. ClassNames — right before JSX so colors stay consistent
|
|
647
647
|
const c = {
|
|
648
|
-
|
|
649
|
-
card: "bg-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
648
|
+
page: "bg-background text-foreground font-sans",
|
|
649
|
+
card: "bg-card text-card-foreground",
|
|
650
|
+
field: "border border-input rounded-md focus:ring-2 focus:ring-ring",
|
|
651
|
+
danger: "bg-destructive text-foreground active:translate-y-px active:shadow-sm",
|
|
652
|
+
meta: "text-muted-foreground",
|
|
653
653
|
};
|
|
654
654
|
|
|
655
655
|
// 4. JSX return
|
|
656
656
|
return (
|
|
657
|
-
<div className={`max-w-md mx-auto p-
|
|
657
|
+
<div className={`min-h-screen max-w-md mx-auto p-6 ${c.page}`}>
|
|
658
658
|
<h2 className="text-2xl font-bold mb-4">Todo List</h2>
|
|
659
659
|
<form onSubmit={handleSubmit} className="mb-4">
|
|
660
|
-
<label htmlFor="todo" className="block mb-2 font-
|
|
660
|
+
<label htmlFor="todo" className="block mb-2 font-bold">
|
|
661
661
|
Todo
|
|
662
662
|
</label>
|
|
663
663
|
<input
|
|
664
|
-
className={`w-full ${c.
|
|
664
|
+
className={`w-full ${c.field} px-3 py-2`}
|
|
665
665
|
id="todo"
|
|
666
666
|
type="text"
|
|
667
667
|
onChange={handleInputChange}
|
|
@@ -670,7 +670,7 @@ export default function App() {
|
|
|
670
670
|
</form>
|
|
671
671
|
<ul className="space-y-3">
|
|
672
672
|
{todos.map((doc) => (
|
|
673
|
-
<li className={`flex flex-col items-start p-
|
|
673
|
+
<li className={`flex flex-col items-start p-3 rounded-md shadow-sm ${c.card}`} key={doc._id}>
|
|
674
674
|
<div className="flex items-center justify-between w-full">
|
|
675
675
|
<div className="flex items-center">
|
|
676
676
|
<input
|
|
@@ -681,11 +681,11 @@ export default function App() {
|
|
|
681
681
|
/>
|
|
682
682
|
<span className="font-medium">{doc.todo}</span>
|
|
683
683
|
</div>
|
|
684
|
-
<button className={`text-sm
|
|
684
|
+
<button className={`text-sm px-3 py-2 rounded-md shadow-sm ${c.danger}`} onClick={() => database.del(doc._id)}>
|
|
685
685
|
Delete
|
|
686
686
|
</button>
|
|
687
687
|
</div>
|
|
688
|
-
<div className={`text-xs ${c.
|
|
688
|
+
<div className={`text-xs ${c.meta} mt-1`}>{new Date(doc.createdAt).toISOString()}</div>
|
|
689
689
|
</li>
|
|
690
690
|
))}
|
|
691
691
|
</ul>
|
package/llms/fireproof.md
CHANGED
|
@@ -470,36 +470,36 @@ export default function App() {
|
|
|
470
470
|
};
|
|
471
471
|
|
|
472
472
|
const c = {
|
|
473
|
-
|
|
474
|
-
card: "bg-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
473
|
+
page: "bg-background text-foreground font-sans",
|
|
474
|
+
card: "bg-card text-card-foreground",
|
|
475
|
+
field: "border border-input rounded-md focus:ring-2 focus:ring-ring",
|
|
476
|
+
action: "bg-primary text-primary-foreground active:translate-y-px active:shadow-sm",
|
|
477
|
+
meta: "text-muted-foreground",
|
|
478
478
|
};
|
|
479
479
|
|
|
480
480
|
return (
|
|
481
|
-
<div className={`p-6 max-w-lg mx-auto ${c.
|
|
481
|
+
<div className={`min-h-screen p-6 max-w-lg mx-auto ${c.page}`}>
|
|
482
482
|
<h2 className="text-2xl font-bold mb-4">Image Uploader</h2>
|
|
483
483
|
<form onSubmit={onSubmit} className="space-y-3">
|
|
484
|
-
<input type="file" accept="image/*" onChange={onPickFile} className={`w-full ${c.
|
|
484
|
+
<input type="file" accept="image/*" onChange={onPickFile} className={`w-full ${c.field} p-2`} />
|
|
485
485
|
<input
|
|
486
486
|
type="text"
|
|
487
487
|
placeholder="Caption"
|
|
488
488
|
value={doc.caption}
|
|
489
489
|
onChange={(e) => merge({ caption: e.target.value })}
|
|
490
|
-
className={`w-full ${c.
|
|
490
|
+
className={`w-full ${c.field} p-2`}
|
|
491
491
|
/>
|
|
492
|
-
<button type="submit" className={`px-4 py-2 ${c.
|
|
492
|
+
<button type="submit" className={`px-4 py-2 rounded-md shadow-sm ${c.action}`}>
|
|
493
493
|
Upload
|
|
494
494
|
</button>
|
|
495
495
|
</form>
|
|
496
496
|
|
|
497
|
-
<h3 className="text-lg font-
|
|
497
|
+
<h3 className="text-lg font-bold mt-8">Recent Uploads</h3>
|
|
498
498
|
<div className="grid grid-cols-2 gap-4 mt-2">
|
|
499
499
|
{docs.map((d) => (
|
|
500
|
-
<div key={d._id} className={
|
|
501
|
-
{d._files?.photo?.url && <img src={d._files.photo.url} alt={d.caption || "upload"} className="w-full h-auto rounded" />}
|
|
502
|
-
<p className={`text-sm ${c.
|
|
500
|
+
<div key={d._id} className={`p-3 rounded-md shadow-sm ${c.card}`}>
|
|
501
|
+
{d._files?.photo?.url && <img src={d._files.photo.url} alt={d.caption || "upload"} className="w-full h-auto rounded-md" />}
|
|
502
|
+
<p className={`text-sm ${c.meta} mt-2`}>{d.caption || "No caption"}</p>
|
|
503
503
|
</div>
|
|
504
504
|
))}
|
|
505
505
|
</div>
|
|
@@ -612,23 +612,23 @@ export default function App() {
|
|
|
612
612
|
|
|
613
613
|
// 3. ClassNames — right before JSX so colors stay consistent
|
|
614
614
|
const c = {
|
|
615
|
-
|
|
616
|
-
card: "bg-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
615
|
+
page: "bg-background text-foreground font-sans",
|
|
616
|
+
card: "bg-card text-card-foreground",
|
|
617
|
+
field: "border border-input rounded-md focus:ring-2 focus:ring-ring",
|
|
618
|
+
danger: "bg-destructive text-foreground active:translate-y-px active:shadow-sm",
|
|
619
|
+
meta: "text-muted-foreground",
|
|
620
620
|
};
|
|
621
621
|
|
|
622
622
|
// 4. JSX return
|
|
623
623
|
return (
|
|
624
|
-
<div className={`max-w-md mx-auto p-
|
|
624
|
+
<div className={`min-h-screen max-w-md mx-auto p-6 ${c.page}`}>
|
|
625
625
|
<h2 className="text-2xl font-bold mb-4">Todo List</h2>
|
|
626
626
|
<form onSubmit={handleSubmit} className="mb-4">
|
|
627
|
-
<label htmlFor="todo" className="block mb-2 font-
|
|
627
|
+
<label htmlFor="todo" className="block mb-2 font-bold">
|
|
628
628
|
Todo
|
|
629
629
|
</label>
|
|
630
630
|
<input
|
|
631
|
-
className={`w-full ${c.
|
|
631
|
+
className={`w-full ${c.field} px-3 py-2`}
|
|
632
632
|
id="todo"
|
|
633
633
|
type="text"
|
|
634
634
|
onChange={handleInputChange}
|
|
@@ -637,7 +637,7 @@ export default function App() {
|
|
|
637
637
|
</form>
|
|
638
638
|
<ul className="space-y-3">
|
|
639
639
|
{todos.map((doc) => (
|
|
640
|
-
<li className={`flex flex-col items-start p-
|
|
640
|
+
<li className={`flex flex-col items-start p-3 rounded-md shadow-sm ${c.card}`} key={doc._id}>
|
|
641
641
|
<div className="flex items-center justify-between w-full">
|
|
642
642
|
<div className="flex items-center">
|
|
643
643
|
<input
|
|
@@ -648,11 +648,11 @@ export default function App() {
|
|
|
648
648
|
/>
|
|
649
649
|
<span className="font-medium">{doc.todo}</span>
|
|
650
650
|
</div>
|
|
651
|
-
<button className={`text-sm
|
|
651
|
+
<button className={`text-sm px-3 py-2 rounded-md shadow-sm ${c.danger}`} onClick={() => database.del(doc._id)}>
|
|
652
652
|
Delete
|
|
653
653
|
</button>
|
|
654
654
|
</div>
|
|
655
|
-
<div className={`text-xs ${c.
|
|
655
|
+
<div className={`text-xs ${c.meta} mt-1`}>{new Date(doc.createdAt).toISOString()}</div>
|
|
656
656
|
</li>
|
|
657
657
|
))}
|
|
658
658
|
</ul>
|
package/llms/p5.md
CHANGED
|
@@ -190,14 +190,13 @@ export default function App() {
|
|
|
190
190
|
}, [key]);
|
|
191
191
|
|
|
192
192
|
return (
|
|
193
|
-
<div className="min-h-screen bg-
|
|
193
|
+
<div className="min-h-screen bg-background text-foreground font-sans p-6">
|
|
194
194
|
<div
|
|
195
195
|
ref={hostRef}
|
|
196
|
-
className="w-full h-[70vh] overflow-hidden rounded-
|
|
197
|
-
style={{ touchAction: "none" }}
|
|
196
|
+
className="w-full h-[70vh] overflow-hidden rounded-lg border border-border shadow-md touch-none"
|
|
198
197
|
/>
|
|
199
198
|
<button
|
|
200
|
-
className="mt-3 rounded-
|
|
199
|
+
className="mt-3 rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm shadow-sm active:translate-y-px active:shadow-sm"
|
|
201
200
|
onClick={() => setParams((prev) => ({ ...prev, seed: Math.floor(Math.random() * 100000) }))}
|
|
202
201
|
>
|
|
203
202
|
Reseed
|
|
@@ -244,7 +243,7 @@ React.useEffect(() => {
|
|
|
244
243
|
return () => instance.remove();
|
|
245
244
|
}, [key]);
|
|
246
245
|
|
|
247
|
-
return <div ref={hostRef} className="w-full h-full
|
|
246
|
+
return <div ref={hostRef} className="w-full h-full touch-none" />;
|
|
248
247
|
```
|
|
249
248
|
|
|
250
249
|
Because the effect re-runs on a changed `key`, a parameter change is a clean
|
|
@@ -296,8 +295,8 @@ stutter.
|
|
|
296
295
|
The platform injects this app's colours as CSS variables — `--background`,
|
|
297
296
|
`--surface`, `--primary`, `--secondary`, `--accent`, `--text-primary`,
|
|
298
297
|
`--text-secondary`, `--border` — and the owner restyles the whole app by swapping
|
|
299
|
-
those values. Everything outside the canvas reads them through Tailwind
|
|
300
|
-
|
|
298
|
+
those values. Everything outside the canvas reads them through plain Tailwind
|
|
299
|
+
utilities (`bg-background`, `text-foreground`), but **canvas pixels cannot follow a CSS
|
|
301
300
|
variable**, so a sketch that inlines `"#00e5ff"` is the one part of a themed vibe
|
|
302
301
|
its owner can never restyle.
|
|
303
302
|
|