@vibes.diy/prompts 2.2.10 → 2.2.11
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/index.d.ts +1 -0
- package/index.js +1 -0
- package/index.js.map +1 -1
- package/json-docs.d.ts +1 -1
- package/llms/image-gen.d.ts +2 -0
- package/llms/image-gen.js +9 -0
- package/llms/image-gen.js.map +1 -0
- package/llms/image-gen.md +102 -0
- package/llms/index.d.ts +1 -1
- package/llms/index.js +3 -3
- package/package.json +3 -3
- package/prompts.d.ts +6 -0
- package/prompts.js +36 -3
- package/prompts.js.map +1 -1
- package/settings.d.ts +1 -0
- package/system-prompt-initial.md +2 -2
- package/system-prompt.md +2 -2
- package/themes/aether.md +41 -0
- package/themes/archive.md +43 -0
- package/themes/atelier.md +42 -0
- package/themes/atlas.md +42 -0
- package/themes/broadsheet.md +20 -0
- package/themes/brutalist.md +208 -0
- package/themes/capsule.md +47 -0
- package/themes/carbon.md +42 -0
- package/themes/chrome.md +132 -0
- package/themes/chrono.md +33 -0
- package/themes/codex.md +45 -0
- package/themes/computer-angel-heaven.md +57 -0
- package/themes/console.md +46 -0
- package/themes/default.md +96 -0
- package/themes/desktop.md +49 -0
- package/themes/dial.md +46 -0
- package/themes/dossier.md +35 -0
- package/themes/edge.md +39 -0
- package/themes/exemplars/aether/App.jsx +224 -0
- package/themes/exemplars/archive/App.jsx +222 -0
- package/themes/exemplars/atelier/App.jsx +224 -0
- package/themes/exemplars/atlas/App.jsx +216 -0
- package/themes/exemplars/broadsheet/App.jsx +216 -0
- package/themes/exemplars/brutalist/App.jsx +290 -0
- package/themes/exemplars/capsule/App.jsx +216 -0
- package/themes/exemplars/carbon/App.jsx +216 -0
- package/themes/exemplars/chrome/App.jsx +253 -0
- package/themes/exemplars/chrono/App.jsx +222 -0
- package/themes/exemplars/codex/App.jsx +224 -0
- package/themes/exemplars/computer-angel-heaven/App.jsx +224 -0
- package/themes/exemplars/console/App.jsx +216 -0
- package/themes/exemplars/default/App.jsx +219 -0
- package/themes/exemplars/desktop/App.jsx +224 -0
- package/themes/exemplars/dial/App.jsx +216 -0
- package/themes/exemplars/dossier/App.jsx +224 -0
- package/themes/exemplars/edge/App.jsx +216 -0
- package/themes/exemplars/guild/App.jsx +224 -0
- package/themes/exemplars/hearth/App.jsx +224 -0
- package/themes/exemplars/industrial/App.jsx +224 -0
- package/themes/exemplars/matrix/App.jsx +224 -0
- package/themes/exemplars/mesh/App.jsx +222 -0
- package/themes/exemplars/neomario/App.jsx +222 -0
- package/themes/exemplars/neon/App.jsx +224 -0
- package/themes/exemplars/nexus/App.jsx +216 -0
- package/themes/exemplars/opus/App.jsx +224 -0
- package/themes/exemplars/orbit/App.jsx +224 -0
- package/themes/exemplars/palate/App.jsx +224 -0
- package/themes/exemplars/pitch/App.jsx +222 -0
- package/themes/exemplars/poster/App.jsx +222 -0
- package/themes/exemplars/proof/App.jsx +224 -0
- package/themes/exemplars/recon/App.jsx +216 -0
- package/themes/exemplars/rift/App.jsx +224 -0
- package/themes/exemplars/rune/App.jsx +224 -0
- package/themes/exemplars/scrapbook/App.jsx +222 -0
- package/themes/exemplars/sensor/App.jsx +224 -0
- package/themes/exemplars/signal/App.jsx +222 -0
- package/themes/exemplars/slab/App.jsx +224 -0
- package/themes/exemplars/specimen/App.jsx +222 -0
- package/themes/exemplars/terminal/App.jsx +224 -0
- package/themes/exemplars/vault/App.jsx +222 -0
- package/themes/exemplars/winter-sports/App.jsx +224 -0
- package/themes/exemplars/zine/App.jsx +214 -0
- package/themes/guild.md +44 -0
- package/themes/hearth.md +45 -0
- package/themes/index.d.ts +11 -0
- package/themes/index.js +272 -0
- package/themes/index.js.map +1 -0
- package/themes/industrial.md +37 -0
- package/themes/matrix.md +41 -0
- package/themes/mesh.md +42 -0
- package/themes/neomario.md +47 -0
- package/themes/neon.md +48 -0
- package/themes/nexus.md +40 -0
- package/themes/opus.md +61 -0
- package/themes/orbit.md +46 -0
- package/themes/palate.md +35 -0
- package/themes/pitch.md +39 -0
- package/themes/poster.md +39 -0
- package/themes/proof.md +41 -0
- package/themes/recon.md +39 -0
- package/themes/rift.md +45 -0
- package/themes/rune.md +44 -0
- package/themes/scrapbook.md +43 -0
- package/themes/sensor.md +42 -0
- package/themes/signal.md +37 -0
- package/themes/slab.md +35 -0
- package/themes/specimen.md +21 -0
- package/themes/terminal.md +39 -0
- package/themes/vault.md +41 -0
- package/themes/winter-sports.md +39 -0
- package/themes/zine.md +40 -0
- package/llms/img-vibes.d.ts +0 -2
- package/llms/img-vibes.js +0 -9
- package/llms/img-vibes.js.map +0 -1
- package/llms/img-vibes.md +0 -167
package/index.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ export * from "./chat.js";
|
|
|
4
4
|
export * from "./json-docs.js";
|
|
5
5
|
export * from "./view-state.js";
|
|
6
6
|
export * from "./style-prompts.js";
|
|
7
|
+
export * from "./themes/index.js";
|
|
7
8
|
export { parseContent } from "./segment-parser.js";
|
|
8
9
|
export { resolveEffectiveModel } from "./prompts.js";
|
|
9
10
|
export { normalizeComponentExports, transformImports, coreImportMap } from "./component-transforms.js";
|
package/index.js
CHANGED
|
@@ -4,6 +4,7 @@ export * from "./chat.js";
|
|
|
4
4
|
export * from "./json-docs.js";
|
|
5
5
|
export * from "./view-state.js";
|
|
6
6
|
export * from "./style-prompts.js";
|
|
7
|
+
export * from "./themes/index.js";
|
|
7
8
|
export { parseContent } from "./segment-parser.js";
|
|
8
9
|
export { resolveEffectiveModel } from "./prompts.js";
|
|
9
10
|
export { normalizeComponentExports, transformImports, coreImportMap } from "./component-transforms.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,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEvG,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../jsr/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,gBAAgB,CAAC;AAE/B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAGrD,OAAO,EAAE,yBAAyB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAEvG,OAAO,EAAE,wBAAwB,EAAE,MAAM,0BAA0B,CAAC"}
|
package/json-docs.d.ts
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"image-gen.js","sourceRoot":"","sources":["../../jsr/llms/image-gen.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,cAAc,GAAc;IACvC,IAAI,EAAE,WAAW;IACjB,KAAK,EAAE,kBAAkB;IACzB,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,0BAA0B;IACvC,YAAY,EAAE,SAAS;IACvB,UAAU,EAAE,QAAQ;CACrB,CAAC"}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
# ImgGen Component
|
|
2
|
+
|
|
3
|
+
Generate and edit images from a text prompt. Each generated image lands as a file ref on the doc — display reads the platform-minted URL via `_files`.
|
|
4
|
+
|
|
5
|
+
## Basic Usage
|
|
6
|
+
|
|
7
|
+
```jsx
|
|
8
|
+
import { ImgGen } from "use-vibes";
|
|
9
|
+
|
|
10
|
+
function MyComponent() {
|
|
11
|
+
return <ImgGen prompt="A sunset over mountains" />;
|
|
12
|
+
}
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
`<ImgGen>` writes the doc into a Fireproof database (default name `"ImgGen"`). The doc carries `_files.v1 = { uploadId, type, size }` and the platform mints `_files.v1.url` on read. Render the image with:
|
|
16
|
+
|
|
17
|
+
```jsx
|
|
18
|
+
const ver = doc.versions?.[doc.currentVersion ?? 0];
|
|
19
|
+
const meta = ver?.id ? doc._files?.[ver.id] : undefined;
|
|
20
|
+
return <img src={meta?.url} alt={doc.prompt} />;
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
This is the same `_files`-shape contract documented in `fireproof.md`'s "Working with Files" section — read it first if you have not seen the platform's file/URL story.
|
|
24
|
+
|
|
25
|
+
## Editing an Uploaded Image
|
|
26
|
+
|
|
27
|
+
Pass a `File` object via `images` to run img2img:
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
import { useState } from "react";
|
|
31
|
+
import { ImgGen } from "use-vibes";
|
|
32
|
+
|
|
33
|
+
function MyComponent() {
|
|
34
|
+
const [file, setFile] = useState(null);
|
|
35
|
+
return (
|
|
36
|
+
<div>
|
|
37
|
+
<input type="file" accept="image/*" onChange={(e) => setFile(e.target.files[0])} />
|
|
38
|
+
{file && <ImgGen prompt="Make it look like a watercolor painting" images={[file]} />}
|
|
39
|
+
</div>
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
The input image is automatically resized (max 1024px) and compressed as JPEG before sending. img2img is currently supported on `prodia/*` models.
|
|
45
|
+
|
|
46
|
+
## Loading a Specific Doc
|
|
47
|
+
|
|
48
|
+
```jsx
|
|
49
|
+
<ImgGen _id="my-image-id" database={database} />
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
If the doc has a `prompt` but no `_files` yet, the component generates one.
|
|
53
|
+
|
|
54
|
+
## Gallery Pattern
|
|
55
|
+
|
|
56
|
+
Browse stored images with `useLiveQuery`:
|
|
57
|
+
|
|
58
|
+
```jsx
|
|
59
|
+
import { useFireproof } from "use-fireproof";
|
|
60
|
+
import { ImgGen } from "use-vibes";
|
|
61
|
+
|
|
62
|
+
function MyComponent() {
|
|
63
|
+
const { useLiveQuery } = useFireproof("ImgGen");
|
|
64
|
+
const { docs } = useLiveQuery("type", { key: "image", descending: true });
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<div>
|
|
68
|
+
<ImgGen prompt="A colorful landscape" />
|
|
69
|
+
{docs.map((doc) => {
|
|
70
|
+
const ver = doc.versions?.[doc.currentVersion ?? 0];
|
|
71
|
+
const meta = ver?.id ? doc._files?.[ver.id] : undefined;
|
|
72
|
+
return <img key={doc._id} src={meta?.url} alt={doc.prompt} width={128} />;
|
|
73
|
+
})}
|
|
74
|
+
</div>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
## Caching and Versions
|
|
80
|
+
|
|
81
|
+
- Same prompt produces a deterministic `_id` (hash-based), so results are cached across reloads.
|
|
82
|
+
- Each image has a regenerate button that appends a new version (writes a new `_files.v<N>` entry).
|
|
83
|
+
- Prev / next controls navigate between stored versions.
|
|
84
|
+
- Set `showControls={false}` to hide regenerate and version navigation.
|
|
85
|
+
|
|
86
|
+
## Choosing a Model
|
|
87
|
+
|
|
88
|
+
```jsx
|
|
89
|
+
<ImgGen prompt="An astronaut riding a horse" model="openai/gpt-5-image-mini" />
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
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.
|
|
93
|
+
|
|
94
|
+
#### Props
|
|
95
|
+
|
|
96
|
+
- `prompt`: text prompt (required unless `_id` is provided)
|
|
97
|
+
- `images`: array of `File` objects for img2img (uses first image)
|
|
98
|
+
- `_id`: load a specific doc instead of generating
|
|
99
|
+
- `database`: Fireproof db name or instance (default `"ImgGen"`)
|
|
100
|
+
- `className`, `alt`, `style`: standard image styling
|
|
101
|
+
- `showControls`: toggle regenerate + version nav (default `true`)
|
|
102
|
+
- `model`: override the image-gen model for this component
|
package/llms/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export { callaiConfig } from "./callai.js";
|
|
2
2
|
export { fireproofConfig } from "./fireproof.js";
|
|
3
|
-
export {
|
|
3
|
+
export { imageGenConfig } from "./image-gen.js";
|
|
4
4
|
export { webAudioConfig } from "./web-audio.js";
|
|
5
5
|
export { d3Config } from "./d3.js";
|
|
6
6
|
export { threeJsConfig } from "./three-js.js";
|
package/llms/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { callaiConfig } from "./callai.js";
|
|
2
2
|
import { fireproofConfig } from "./fireproof.js";
|
|
3
|
-
import {
|
|
3
|
+
import { imageGenConfig } from "./image-gen.js";
|
|
4
4
|
import { webAudioConfig } from "./web-audio.js";
|
|
5
5
|
import { d3Config } from "./d3.js";
|
|
6
6
|
import { threeJsConfig } from "./three-js.js";
|
|
7
7
|
export { callaiConfig } from "./callai.js";
|
|
8
8
|
export { fireproofConfig } from "./fireproof.js";
|
|
9
|
-
export {
|
|
9
|
+
export { imageGenConfig } from "./image-gen.js";
|
|
10
10
|
export { webAudioConfig } from "./web-audio.js";
|
|
11
11
|
export { d3Config } from "./d3.js";
|
|
12
12
|
export { threeJsConfig } from "./three-js.js";
|
|
13
|
-
export const allConfigs = [callaiConfig,
|
|
13
|
+
export const allConfigs = [callaiConfig, imageGenConfig, webAudioConfig, d3Config, threeJsConfig, fireproofConfig];
|
|
14
14
|
//# sourceMappingURL=index.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vibes.diy/prompts",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.11",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./index.js",
|
|
6
6
|
"description": "",
|
|
@@ -30,8 +30,8 @@
|
|
|
30
30
|
"@fireproof/core-types-base": "~0.24.19",
|
|
31
31
|
"@fireproof/core-types-protocols-cloud": "~0.24.19",
|
|
32
32
|
"@fireproof/use-fireproof": "~0.24.19",
|
|
33
|
-
"@vibes.diy/call-ai-v2": "^2.2.
|
|
34
|
-
"@vibes.diy/use-vibes-types": "^2.2.
|
|
33
|
+
"@vibes.diy/call-ai-v2": "^2.2.11",
|
|
34
|
+
"@vibes.diy/use-vibes-types": "^2.2.11",
|
|
35
35
|
"arktype": "~2.2.0",
|
|
36
36
|
"json-schema-faker": "~0.6.1"
|
|
37
37
|
},
|
package/prompts.d.ts
CHANGED
|
@@ -39,6 +39,10 @@ export declare const preAllocSchema: {
|
|
|
39
39
|
readonly type: "string";
|
|
40
40
|
readonly description: "A short, vivid one-line description of what an icon for this app should depict \u2014 what it shows, not how it's drawn. Examples: 'a fox on a record player', 'a sailboat on a calm lake', 'a chef whisking eggs'. Don't mention colors, line weights, letters, numbers, or framing \u2014 those are added separately by the renderer.";
|
|
41
41
|
};
|
|
42
|
+
readonly theme: {
|
|
43
|
+
readonly type: "string";
|
|
44
|
+
readonly description: "Optional theme slug from the theme catalog above. Pick one only if the user's prompt clearly implies a visual style (retro, brutalist, dark terminal, magazine, etc.). Leave empty/omit if no strong style signal.";
|
|
45
|
+
};
|
|
42
46
|
};
|
|
43
47
|
};
|
|
44
48
|
export declare const preAllocParsed: import("arktype/internal/variants/object.ts").ObjectType<{
|
|
@@ -48,11 +52,13 @@ export declare const preAllocParsed: import("arktype/internal/variants/object.ts
|
|
|
48
52
|
slug: string;
|
|
49
53
|
}[];
|
|
50
54
|
iconDescription: string;
|
|
55
|
+
theme?: string | undefined;
|
|
51
56
|
}, {}>;
|
|
52
57
|
export type PreAllocParsed = typeof preAllocParsed.infer;
|
|
53
58
|
export interface SystemPromptResult {
|
|
54
59
|
systemPrompt: string;
|
|
55
60
|
skills: string[];
|
|
61
|
+
theme?: string;
|
|
56
62
|
demoData: boolean;
|
|
57
63
|
model: string;
|
|
58
64
|
}
|
package/prompts.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { loadAsset, KeyedResolvOnce } from "@adviser/cement";
|
|
2
2
|
import { getLlmCatalog, getLlmCatalogNames } from "./json-docs.js";
|
|
3
|
+
import { getThemeCatalogNames, vibesThemes } from "./themes/index.js";
|
|
3
4
|
import { type } from "arktype";
|
|
4
5
|
import { defaultStylePrompt } from "./style-prompts.js";
|
|
5
6
|
export const DEFAULT_CODING_MODEL = "anthropic/claude-opus-4.5";
|
|
@@ -28,17 +29,23 @@ export async function resolveEffectiveModel(settingsDoc, vibeDoc) {
|
|
|
28
29
|
return defaultCodingModel();
|
|
29
30
|
}
|
|
30
31
|
export async function getDefaultSkills() {
|
|
31
|
-
return ["fireproof", "callai", "
|
|
32
|
+
return ["fireproof", "callai", "image-gen", "web-audio"];
|
|
32
33
|
}
|
|
33
34
|
export async function makePreAllocUserMessage(userPrompt) {
|
|
34
35
|
const catalog = await getLlmCatalog();
|
|
35
36
|
const catalogText = catalog.map((l) => `- ${l.name}: ${l.description}`).join("\n");
|
|
37
|
+
const themeText = vibesThemes
|
|
38
|
+
.map((t) => `- ${t.slug}: ${t.name}${t.bodyFont ? ` (${t.bodyFont.replace(/['"]/g, "").split(",")[0].trim()})` : ""}`)
|
|
39
|
+
.join("\n");
|
|
36
40
|
return [
|
|
37
|
-
"Pick skills from this catalog that fit the user's app request, propose 3 title/slug pairs for naming,
|
|
41
|
+
"Pick skills from this catalog that fit the user's app request, propose 3 title/slug pairs for naming, propose a one-line icon subject, and optionally pick a theme if a clear visual style is implied.",
|
|
38
42
|
"",
|
|
39
43
|
"Skill catalog:",
|
|
40
44
|
catalogText,
|
|
41
45
|
"",
|
|
46
|
+
"Theme catalog:",
|
|
47
|
+
themeText,
|
|
48
|
+
"",
|
|
42
49
|
"User request:",
|
|
43
50
|
userPrompt,
|
|
44
51
|
].join("\n");
|
|
@@ -66,12 +73,17 @@ export const preAllocSchema = {
|
|
|
66
73
|
type: "string",
|
|
67
74
|
description: "A short, vivid one-line description of what an icon for this app should depict — what it shows, not how it's drawn. Examples: 'a fox on a record player', 'a sailboat on a calm lake', 'a chef whisking eggs'. Don't mention colors, line weights, letters, numbers, or framing — those are added separately by the renderer.",
|
|
68
75
|
},
|
|
76
|
+
theme: {
|
|
77
|
+
type: "string",
|
|
78
|
+
description: "Optional theme slug from the theme catalog above. Pick one only if the user's prompt clearly implies a visual style (retro, brutalist, dark terminal, magazine, etc.). Leave empty/omit if no strong style signal.",
|
|
79
|
+
},
|
|
69
80
|
},
|
|
70
81
|
};
|
|
71
82
|
export const preAllocParsed = type({
|
|
72
83
|
skills: type("string").array(),
|
|
73
84
|
pairs: type({ title: "string", slug: "string" }).array(),
|
|
74
85
|
iconDescription: "string",
|
|
86
|
+
"theme?": "string",
|
|
75
87
|
});
|
|
76
88
|
export function generateImportStatements(llms) {
|
|
77
89
|
const seen = new Set();
|
|
@@ -136,7 +148,26 @@ export async function makeBaseSystemPrompt(model, sessionDoc) {
|
|
|
136
148
|
concatenatedLlmsTxts.push(`</${llm.label}-docs>`);
|
|
137
149
|
}
|
|
138
150
|
const concatenatedLlmsTxt = concatenatedLlmsTxts.join("\n");
|
|
139
|
-
const
|
|
151
|
+
const themeCatalogNames = getThemeCatalogNames();
|
|
152
|
+
const requestedTheme = typeof sessionDoc?.theme === "string" ? sessionDoc.theme : undefined;
|
|
153
|
+
const validatedTheme = requestedTheme && themeCatalogNames.has(requestedTheme) ? requestedTheme : undefined;
|
|
154
|
+
let themeDesignSection = "";
|
|
155
|
+
if (validatedTheme) {
|
|
156
|
+
const rTheme = await keyedLoadAsset.get(`theme:${validatedTheme}`).once(async () => {
|
|
157
|
+
return loadAsset(`./themes/${validatedTheme}.md`, {
|
|
158
|
+
fallBackUrl: pkgBaseUrl,
|
|
159
|
+
basePath: () => import.meta.url,
|
|
160
|
+
mock: { fetch: sessionDoc.fetch },
|
|
161
|
+
});
|
|
162
|
+
});
|
|
163
|
+
if (rTheme.isErr()) {
|
|
164
|
+
console.warn(`Failed to load theme ${validatedTheme}:`, rTheme.Err());
|
|
165
|
+
}
|
|
166
|
+
else {
|
|
167
|
+
themeDesignSection = `<theme-design-md>\n${rTheme.Ok() ?? ""}\n</theme-design-md>`;
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
const stylePrompt = sessionDoc?.stylePrompt || (themeDesignSection ? "" : defaultStylePrompt);
|
|
140
171
|
const demoDataLines = includeDemoData
|
|
141
172
|
? "\n- If your app has a function that uses callAI with a schema to save data, include a Demo Data button that calls that function with an example prompt. Don't write an extra function, use real app code so the data illustrates what it looks like to use the app.\n- Never have an instance of callAI that is only used to generate demo data, always use the same calls that are triggered by user actions in the app."
|
|
142
173
|
: "";
|
|
@@ -151,12 +182,14 @@ export async function makeBaseSystemPrompt(model, sessionDoc) {
|
|
|
151
182
|
.replaceAll("{{STYLE_PROMPT}}", stylePrompt)
|
|
152
183
|
.replaceAll("{{DEMO_DATA}}", demoDataLines)
|
|
153
184
|
.replaceAll("{{CONCATENATED_LLMS}}", concatenatedLlmsTxt)
|
|
185
|
+
.replaceAll("{{THEME_DESIGN}}", themeDesignSection)
|
|
154
186
|
.replaceAll("{{TITLE_SECTION}}", titleSection)
|
|
155
187
|
.replaceAll("{{USER_PROMPT}}", userPromptSection)
|
|
156
188
|
.replaceAll("{{IMPORT_STATEMENTS}}", importStatements);
|
|
157
189
|
return {
|
|
158
190
|
systemPrompt,
|
|
159
191
|
skills: selectedNames,
|
|
192
|
+
theme: validatedTheme,
|
|
160
193
|
demoData: includeDemoData,
|
|
161
194
|
model,
|
|
162
195
|
};
|
package/prompts.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"prompts.js","sourceRoot":"","sources":["../jsr/prompts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAmB,MAAM,gBAAgB,CAAC;AACpF,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAAoC,CAAC;AAEzE,KAAK,UAAU,kBAAkB;IAC/B,OAAO,oBAAoB,CAAC;AAC9B,CAAC;AAED,SAAS,wBAAwB,CAAC,EAAW;IAC3C,IAAI,OAAO,EAAE,KAAK,QAAQ;QAAE,OAAO,SAAS,CAAC;IAC7C,MAAM,OAAO,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC;IAC1B,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;AAClD,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAAW;IAC1C,OAAO,wBAAwB,CAAC,EAAE,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAW;IAC5C,OAAO,OAAO,wBAAwB,CAAC,EAAE,CAAC,KAAK,QAAQ,CAAC;AAC1D,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,qBAAqB,CACzC,WAAgC,EAChC,OAAoC;IAEpC,MAAM,aAAa,GAAG,wBAAwB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IACvE,IAAI,aAAa;QAAE,OAAO,aAAa,CAAC;IACxC,MAAM,YAAY,GAAG,wBAAwB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAClE,IAAI,YAAY;QAAE,OAAO,YAAY,CAAC;IACtC,OAAO,kBAAkB,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB;IACpC,OAAO,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;AAC3D,CAAC;AASD,MAAM,CAAC,KAAK,UAAU,uBAAuB,CAAC,UAAkB;IAC9D,MAAM,OAAO,GAAG,MAAM,aAAa,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnF,OAAO;QACL,
|
|
1
|
+
{"version":3,"file":"prompts.js","sourceRoot":"","sources":["../jsr/prompts.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAmB,MAAM,gBAAgB,CAAC;AACpF,OAAO,EAAE,oBAAoB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAGxD,MAAM,CAAC,MAAM,oBAAoB,GAAG,2BAAoC,CAAC;AAEzE,KAAK,UAAU,kBAAkB;IAC/B,OAAO,oBAAoB,CAAC;AAC9B,CAAC;AAED,SAAS,wBAAwB,CAAC,EAAW;IAC3C,IAAI,OAAO,EAAE,KAAK,QAAQ;QAAE,OAAO,SAAS,CAAC;IAC7C,MAAM,OAAO,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC;IAC1B,OAAO,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;AAClD,CAAC;AAED,MAAM,UAAU,gBAAgB,CAAC,EAAW;IAC1C,OAAO,wBAAwB,CAAC,EAAE,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAW;IAC5C,OAAO,OAAO,wBAAwB,CAAC,EAAE,CAAC,KAAK,QAAQ,CAAC;AAC1D,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,qBAAqB,CACzC,WAAgC,EAChC,OAAoC;IAEpC,MAAM,aAAa,GAAG,wBAAwB,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IACvE,IAAI,aAAa;QAAE,OAAO,aAAa,CAAC;IACxC,MAAM,YAAY,GAAG,wBAAwB,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;IAClE,IAAI,YAAY;QAAE,OAAO,YAAY,CAAC;IACtC,OAAO,kBAAkB,EAAE,CAAC;AAC9B,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,gBAAgB;IACpC,OAAO,CAAC,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;AAC3D,CAAC;AASD,MAAM,CAAC,KAAK,UAAU,uBAAuB,CAAC,UAAkB;IAC9D,MAAM,OAAO,GAAG,MAAM,aAAa,EAAE,CAAC;IACtC,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnF,MAAM,SAAS,GAAG,WAAW;SAC1B,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;SACrH,IAAI,CAAC,IAAI,CAAC,CAAC;IACd,OAAO;QACL,wMAAwM;QACxM,EAAE;QACF,gBAAgB;QAChB,WAAW;QACX,EAAE;QACF,gBAAgB;QAChB,SAAS;QACT,EAAE;QACF,eAAe;QACf,UAAU;KACX,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACf,CAAC;AAOD,MAAM,CAAC,MAAM,cAAc,GAAG;IAC5B,IAAI,EAAE,WAAW;IACjB,UAAU,EAAE;QACV,MAAM,EAAE;YACN,IAAI,EAAE,OAAO;YACb,WAAW,EACT,2IAA2I;YAC7I,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC1B;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,WAAW,EACT,kHAAkH;YACpH,KAAK,EAAE;gBACL,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE;oBACV,KAAK,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;oBACzB,IAAI,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;iBACzB;aACF;SACF;QACD,eAAe,EAAE;YACf,IAAI,EAAE,QAAQ;YACd,WAAW,EACT,+TAA+T;SAClU;QACD,KAAK,EAAE;YACL,IAAI,EAAE,QAAQ;YACd,WAAW,EACT,oNAAoN;SACvN;KACF;CACO,CAAC;AAGX,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC;IACjC,MAAM,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE;IAC9B,KAAK,EAAE,IAAI,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;IACxD,eAAe,EAAE,QAAQ;IACzB,QAAQ,EAAE,QAAQ;CACnB,CAAC,CAAC;AAuCH,MAAM,UAAU,wBAAwB,CAAC,IAAuB;IAC9D,MAAM,IAAI,GAAG,IAAI,GAAG,EAAU,CAAC;IAC/B,OAAO,IAAI;SACR,MAAM,CAAC,CAAC,CAAC,EAAuE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,UAAU,CAAC,CAAC;SAC3H,KAAK,EAAE;SACP,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,aAAa,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;SAC5D,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE;QACZ,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC,YAAY,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;QAChD,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;YAAE,OAAO,KAAK,CAAC;QAChC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QACd,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;SACD,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACT,MAAM,UAAU,GAAG,CAAC,CAAC,UAAU,IAAI,OAAO,CAAC;QAC3C,QAAQ,UAAU,EAAE,CAAC;YACnB,KAAK,WAAW;gBACd,OAAO,iBAAiB,CAAC,CAAC,UAAU,UAAU,CAAC,CAAC,YAAY,GAAG,CAAC;YAClE,KAAK,SAAS;gBACZ,OAAO,YAAY,CAAC,CAAC,UAAU,UAAU,CAAC,CAAC,YAAY,GAAG,CAAC;YAC7D,KAAK,OAAO,CAAC;YACb;gBACE,OAAO,cAAc,CAAC,CAAC,UAAU,YAAY,CAAC,CAAC,YAAY,GAAG,CAAC;QACnE,CAAC;IACH,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC;AAED,MAAM,cAAc,GAAG,IAAI,eAAe,EAAE,CAAC;AAe7C,MAAM,oBAAoB,GAAG,oCAAoC,CAAC;AAElE,MAAM,CAAC,KAAK,UAAU,oBAAoB,CACxC,KAAa,EACb,UAA+D;IAE/D,MAAM,UAAU,GAAG,UAAU,EAAE,UAAU,IAAI,EAAE,CAAC;IAChD,MAAM,UAAU,GAAG,UAAU,EAAE,UAAU,IAAI,oBAAoB,CAAC;IAClE,MAAM,WAAW,GAAG,MAAM,aAAa,EAAE,CAAC;IAC1C,MAAM,gBAAgB,GAAG,MAAM,kBAAkB,EAAE,CAAC;IAEpD,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IACpF,IAAI,aAAa,GAAG,SAAS;QAC3B,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAe,EAAE,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC1G,CAAC,CAAC,EAAE,CAAC;IACP,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC/B,aAAa,GAAG,CAAC,GAAG,CAAC,MAAM,gBAAgB,EAAE,CAAC,CAAC,CAAC;IAClD,CAAC;IACD,MAAM,eAAe,GAAG,UAAU,EAAE,QAAQ,KAAK,IAAI,CAAC;IAEtD,MAAM,UAAU,GAAG,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAE7E,MAAM,oBAAoB,GAAa,EAAE,CAAC;IAC1C,KAAK,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,MAAM,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;YAE/D,OAAO,SAAS,CAAC,UAAU,GAAG,CAAC,IAAI,KAAK,EAAE;gBACxC,WAAW,EAAE,UAAU;gBACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,IAAI,CAAC,GAAG;gBAC/B,IAAI,EAAE;oBACJ,KAAK,EAAE,UAAU,CAAC,KAAK;iBACxB;aAkBF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC;YAClB,OAAO,CAAC,IAAI,CAAC,+BAA+B,GAAG,CAAC,IAAI,YAAY,OAAO,IAAI,CAAC,OAAO,WAAW,GAAG,CAAC,IAAI,MAAM,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;YAC3H,SAAS;QACX,CAAC;QAMD,oBAAoB,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC;QACjD,oBAAoB,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;QAE5C,oBAAoB,CAAC,IAAI,CAAC,KAAK,GAAG,CAAC,KAAK,QAAQ,CAAC,CAAC;IACpD,CAAC;IACD,MAAM,mBAAmB,GAAG,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAM5D,MAAM,iBAAiB,GAAG,oBAAoB,EAAE,CAAC;IACjD,MAAM,cAAc,GAAG,OAAO,UAAU,EAAE,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5F,MAAM,cAAc,GAAG,cAAc,IAAI,iBAAiB,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAC5G,IAAI,kBAAkB,GAAG,EAAE,CAAC;IAC5B,IAAI,cAAc,EAAE,CAAC;QACnB,MAAM,MAAM,GAAG,MAAM,cAAc,CAAC,GAAG,CAAC,SAAS,cAAc,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;YACjF,OAAO,SAAS,CAAC,YAAY,cAAc,KAAK,EAAE;gBAChD,WAAW,EAAE,UAAU;gBACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,IAAI,CAAC,GAAG;gBAC/B,IAAI,EAAE,EAAE,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE;aAClC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACH,IAAI,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,wBAAwB,cAAc,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC;QACxE,CAAC;aAAM,CAAC;YACN,kBAAkB,GAAG,sBAAsB,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,sBAAsB,CAAC;QACrF,CAAC;IACH,CAAC;IAOD,MAAM,WAAW,GAAG,UAAU,EAAE,WAAW,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC;IAE9F,MAAM,aAAa,GAAG,eAAe;QACnC,CAAC,CAAC,2ZAA2Z;QAC7Z,CAAC,CAAC,EAAE,CAAC;IAEP,MAAM,YAAY,GAAG,UAAU,EAAE,KAAK;QACpC,CAAC,CAAC,sBAAsB,UAAU,CAAC,KAAK,wFAAwF;QAChI,CAAC,CAAC,EAAE,CAAC;IACP,MAAM,iBAAiB,GAAG,UAAU,CAAC,CAAC,CAAC,GAAG,UAAU,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IAEhE,MAAM,gBAAgB,GAAG,4BAA4B,wBAAwB,CAAC,UAAU,CAAC,EAAE,CAAC;IAE5F,MAAM,gBAAgB,GAAG,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,kBAAkB,CAAC;IAC7G,MAAM,QAAQ,GAAG,MAAM,uBAAuB,CAAC,UAAU,EAAE,gBAAgB,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAC/F,MAAM,YAAY,GAAG,QAAQ;SAC1B,UAAU,CAAC,kBAAkB,EAAE,WAAW,CAAC;SAC3C,UAAU,CAAC,eAAe,EAAE,aAAa,CAAC;SAC1C,UAAU,CAAC,uBAAuB,EAAE,mBAAmB,CAAC;SACxD,UAAU,CAAC,kBAAkB,EAAE,kBAAkB,CAAC;SAClD,UAAU,CAAC,mBAAmB,EAAE,YAAY,CAAC;SAC7C,UAAU,CAAC,iBAAiB,EAAE,iBAAiB,CAAC;SAChD,UAAU,CAAC,uBAAuB,EAAE,gBAAgB,CAAC,CAAC;IAEzD,OAAO;QACL,YAAY;QACZ,MAAM,EAAE,aAAa;QACrB,KAAK,EAAE,cAAc;QACrB,QAAQ,EAAE,eAAe;QACzB,KAAK;KACN,CAAC;AACJ,CAAC;AAED,KAAK,UAAU,uBAAuB,CAAC,UAAkB,EAAE,QAAgB,EAAE,OAAsB;IACjG,MAAM,KAAK,GAAG,MAAM,cAAc,CAAC,GAAG,CAAC,iBAAiB,QAAQ,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;QAClF,OAAO,SAAS,CAAC,KAAK,QAAQ,EAAE,EAAE;YAChC,WAAW,EAAE,UAAU;YACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,IAAI,CAAC,GAAG;YAC/B,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;SACzB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC;QAClB,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,KAAK,CAAC,EAAE,EAAE,CAAC;AACpB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,mBAAmB,CAAC,UAAmB,EAAE,OAAsB;IACnF,MAAM,KAAK,GAAG,MAAM,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;QAC1E,OAAO,SAAS,CAAC,wBAAwB,EAAE;YACzC,WAAW,EAAE,UAAU,IAAI,oBAAoB;YAC/C,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,IAAI,CAAC,GAAG;YAC/B,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;SACzB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC;QAClB,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,KAAK,CAAC,EAAE,EAAE,CAAC;AACpB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,yBAAyB,CAAC,UAAmB,EAAE,OAAsB;IACzF,MAAM,KAAK,GAAG,MAAM,cAAc,CAAC,GAAG,CAAC,0BAA0B,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;QACjF,OAAO,SAAS,CAAC,+BAA+B,EAAE;YAChD,WAAW,EAAE,UAAU,IAAI,oBAAoB;YAC/C,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,IAAI,CAAC,GAAG;YAC/B,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;SACzB,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC;QAClB,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,KAAK,CAAC,EAAE,EAAE,CAAC;AACpB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,YAAY;IAChC,MAAM,KAAK,GAAG,MAAM,cAAc,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;QACnE,OAAO,SAAS,CAAC,iBAAiB,EAAE;YAClC,WAAW,EAAE,oBAAoB;YACjC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,IAAI,CAAC,GAAG;SAChC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC;QAClB,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,KAAK,CAAC,EAAE,EAAE,CAAC;AACpB,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,YAAY,CAAC,IAAY;IAC7C,MAAM,KAAK,GAAG,MAAM,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE;QAC3D,OAAO,SAAS,CAAC,UAAU,IAAI,KAAK,EAAE;YACpC,WAAW,EAAE,oBAAoB;YACjC,QAAQ,EAAE,GAAG,EAAE,CAAC,OAAO,IAAI,CAAC,GAAG;SAChC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IACH,IAAI,KAAK,CAAC,KAAK,EAAE,EAAE,CAAC;QAClB,OAAO,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,KAAK,CAAC,EAAE,EAAE,CAAC;AACpB,CAAC"}
|
package/settings.d.ts
CHANGED
package/system-prompt-initial.md
CHANGED
|
@@ -13,7 +13,7 @@ You are an AI assistant tasked with creating React components. You should create
|
|
|
13
13
|
- Use Fireproof for data persistence
|
|
14
14
|
- Use `callAI` to fetch AI, use schema like this: `JSON.parse(await callAI(prompt, { schema: { properties: { todos: { type: 'array', items: { type: 'string' } } } } }))` and save final responses as individual Fireproof documents.
|
|
15
15
|
- Always show loading states during any async operation (callAI, fetch, database queries): use a useState boolean (e.g. `isLoading`), set it true before the call and false in .finally(). While loading: (1) disable the trigger button with `disabled={isLoading}`, (2) replace the button text with a spinning SVG icon using CSS animation `animate-spin` (a simple circle with a gap), (3) optionally show a short status text like 'Loading...' near the button. Never leave the user clicking a button with no visual feedback. Pattern: `setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }`
|
|
16
|
-
- For file uploads use drag and drop and store using the `doc._files` API
|
|
16
|
+
- For file uploads use drag and drop and store using the `doc._files` API; for AI image generation use `<ImgGen prompt="..." />`
|
|
17
17
|
- Don't try to generate png or base64 data, use placeholder image APIs instead, like https://picsum.photos/400 where 400 is the square size
|
|
18
18
|
- Never use emojis in the UI. Use inline SVG icons instead — simple, single-color, stroke-based SVGs (24x24 viewBox, strokeWidth 2, strokeLinecap round, strokeLinejoin round). Build icons directly in JSX, do not import icon libraries.
|
|
19
19
|
- List data items on the main page of your app so users don't have to hunt for them
|
|
@@ -21,7 +21,7 @@ You are an AI assistant tasked with creating React components. You should create
|
|
|
21
21
|
- Add small AI-powered suggestion buttons next to form field groups and empty states. When tapped, use callAI to generate example ideas and fill them in, so users can see what's possible without typing from scratch. Use the same callAI calls the app already makes for real functionality — don't create separate AI functions just for suggestions.{{DEMO_DATA}}
|
|
22
22
|
|
|
23
23
|
{{CONCATENATED_LLMS}}
|
|
24
|
-
|
|
24
|
+
{{THEME_DESIGN}}
|
|
25
25
|
{{TITLE_SECTION}}{{USER_PROMPT}}IMPORTANT: You are working in one JavaScript file (`App.jsx`). This is the **first turn** — `App.jsx` does not exist yet. You'll scaffold it once, then sculpt it through a rapid stream of small edits the user can watch land in real time.
|
|
26
26
|
|
|
27
27
|
Before writing code, provide a title and brief description of the app. Then list the top 3 features that are the best fit for a mobile web database with real-time collaboration and describe a short planned workflow showing how those features connect into a coherent user experience.
|
package/system-prompt.md
CHANGED
|
@@ -13,7 +13,7 @@ You are an AI assistant tasked with creating React components. You should create
|
|
|
13
13
|
- Use Fireproof for data persistence
|
|
14
14
|
- Use `callAI` to fetch AI, use schema like this: `JSON.parse(await callAI(prompt, { schema: { properties: { todos: { type: 'array', items: { type: 'string' } } } } }))` and save final responses as individual Fireproof documents.
|
|
15
15
|
- Always show loading states during any async operation (callAI, fetch, database queries): use a useState boolean (e.g. `isLoading`), set it true before the call and false in .finally(). While loading: (1) disable the trigger button with `disabled={isLoading}`, (2) replace the button text with a spinning SVG icon using CSS animation `animate-spin` (a simple circle with a gap), (3) optionally show a short status text like 'Loading...' near the button. Never leave the user clicking a button with no visual feedback. Pattern: `setIsLoading(true); try { await callAI(...); } finally { setIsLoading(false); }`
|
|
16
|
-
- For file uploads use drag and drop and store using the `doc._files` API
|
|
16
|
+
- For file uploads use drag and drop and store using the `doc._files` API; for AI image generation use `<ImgGen prompt="..." />`
|
|
17
17
|
- Don't try to generate png or base64 data, use placeholder image APIs instead, like https://picsum.photos/400 where 400 is the square size
|
|
18
18
|
- Never use emojis in the UI. Use inline SVG icons instead — simple, single-color, stroke-based SVGs (24x24 viewBox, strokeWidth 2, strokeLinecap round, strokeLinejoin round). Build icons directly in JSX, do not import icon libraries.
|
|
19
19
|
- Consider and potentially reuse/extend code from previous responses if relevant
|
|
@@ -27,7 +27,7 @@ You are an AI assistant tasked with creating React components. You should create
|
|
|
27
27
|
- Add small AI-powered suggestion buttons next to form field groups and empty states. When tapped, use callAI to generate example ideas and fill them in, so users can see what's possible without typing from scratch. Use the same callAI calls the app already makes for real functionality — don't create separate AI functions just for suggestions.{{DEMO_DATA}}
|
|
28
28
|
|
|
29
29
|
{{CONCATENATED_LLMS}}
|
|
30
|
-
|
|
30
|
+
{{THEME_DESIGN}}
|
|
31
31
|
{{TITLE_SECTION}}{{USER_PROMPT}}IMPORTANT: You are working in one JavaScript file (`App.jsx`). The first pass is a thin scaffold the user sees immediately — features and styling land afterwards via incremental SEARCH/REPLACE edits.
|
|
32
32
|
|
|
33
33
|
Before writing code, provide a title and brief description of the app. Then list the top 3 features that are the best fit for a mobile web database with real-time collaboration and describe a short planned workflow showing how those features connect into a coherent user experience.
|
package/themes/aether.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Aether Brass
|
|
3
|
+
colors:
|
|
4
|
+
parchment: "#dcbfa6"
|
|
5
|
+
parchment-dark: "#c4a482"
|
|
6
|
+
ink: "#3e2723"
|
|
7
|
+
leather: "#2a1d15"
|
|
8
|
+
brass-light: "#fdf5bb"
|
|
9
|
+
brass-mid: "#cfa562"
|
|
10
|
+
brass-dark: "#745428"
|
|
11
|
+
amber: "#ffaa00"
|
|
12
|
+
typography:
|
|
13
|
+
body-md:
|
|
14
|
+
fontFamily: Special Elite
|
|
15
|
+
fontSize: 1rem
|
|
16
|
+
fontWeight: "400"
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Brand & Style
|
|
20
|
+
|
|
21
|
+
Aether Brass design system. A clean, structured theme with Cinzel Decorative and Homemade Apple and Special Elite typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
|
|
22
|
+
|
|
23
|
+
## Colors
|
|
24
|
+
|
|
25
|
+
- **parchment** (#dcbfa6): Use for backgrounds.
|
|
26
|
+
- **parchment-dark** (#c4a482): Use for supporting UI elements.
|
|
27
|
+
- **ink** (#3e2723): Use for text content.
|
|
28
|
+
- **leather** (#2a1d15): Use for supporting UI elements.
|
|
29
|
+
- **brass-light** (#fdf5bb): Use for supporting UI elements.
|
|
30
|
+
- **brass-mid** (#cfa562): Use for supporting UI elements.
|
|
31
|
+
- **brass-dark** (#745428): Use for supporting UI elements.
|
|
32
|
+
- **amber** (#ffaa00): Use for supporting UI elements.
|
|
33
|
+
|
|
34
|
+
## Typography
|
|
35
|
+
|
|
36
|
+
Load fonts from Google Fonts: Cinzel Decorative, Homemade Apple, Special Elite. Use display=optional.
|
|
37
|
+
Primary body font: 'Special Elite', monospace.
|
|
38
|
+
|
|
39
|
+
## Components
|
|
40
|
+
|
|
41
|
+
Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Archive
|
|
3
|
+
colors:
|
|
4
|
+
bg: "oklch(0.95 0.01 70)"
|
|
5
|
+
text: "oklch(0.15 0.02 50)"
|
|
6
|
+
border: "oklch(0.20 0.02 50)"
|
|
7
|
+
accent: "oklch(0.35 0.04 50)"
|
|
8
|
+
accent-text: "oklch(0.95 0.01 70)"
|
|
9
|
+
muted: "oklch(0.55 0.02 50)"
|
|
10
|
+
page-bg: "oklch(0.92 0.01 65)"
|
|
11
|
+
typography:
|
|
12
|
+
body-md:
|
|
13
|
+
fontFamily: Inter
|
|
14
|
+
fontSize: 1rem
|
|
15
|
+
fontWeight: "400"
|
|
16
|
+
headline:
|
|
17
|
+
fontFamily: Playfair Display
|
|
18
|
+
fontSize: 2rem
|
|
19
|
+
fontWeight: "700"
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Brand & Style
|
|
23
|
+
|
|
24
|
+
Archive design system. A clean, structured theme with Playfair Display and Inter typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
|
|
25
|
+
|
|
26
|
+
## Colors
|
|
27
|
+
|
|
28
|
+
- **bg** (oklch(0.95 0.01 70)): Use for backgrounds.
|
|
29
|
+
- **text** (oklch(0.15 0.02 50)): Use for text content.
|
|
30
|
+
- **border** (oklch(0.20 0.02 50)): Use for borders and dividers.
|
|
31
|
+
- **accent** (oklch(0.35 0.04 50)): Use for primary actions and accents.
|
|
32
|
+
- **accent-text** (oklch(0.95 0.01 70)): Use for text content.
|
|
33
|
+
- **muted** (oklch(0.55 0.02 50)): Use for secondary/muted content.
|
|
34
|
+
- **page-bg** (oklch(0.92 0.01 65)): Use for backgrounds.
|
|
35
|
+
|
|
36
|
+
## Typography
|
|
37
|
+
|
|
38
|
+
Load fonts from Google Fonts: Playfair Display, Inter. Use display=optional.
|
|
39
|
+
Primary body font: 'Inter', sans-serif.
|
|
40
|
+
|
|
41
|
+
## Components
|
|
42
|
+
|
|
43
|
+
Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Atelier Studio
|
|
3
|
+
colors:
|
|
4
|
+
comp-bg: "oklch(0.95 0.03 70)"
|
|
5
|
+
comp-text: "oklch(0.25 0.04 30)"
|
|
6
|
+
comp-border: "oklch(0.25 0.04 30 / 0.15)"
|
|
7
|
+
comp-accent: "oklch(0.65 0.18 55)"
|
|
8
|
+
comp-accent-text: "oklch(1.00 0 0)"
|
|
9
|
+
comp-muted: "oklch(0.50 0.04 30)"
|
|
10
|
+
color-background: "oklch(0.96 0.03 70)"
|
|
11
|
+
comp-accent-secondary: "oklch(0.60 0.15 40)"
|
|
12
|
+
comp-golden: "oklch(0.72 0.15 80)"
|
|
13
|
+
typography:
|
|
14
|
+
body-md:
|
|
15
|
+
fontFamily: Playfair Display
|
|
16
|
+
fontSize: 1rem
|
|
17
|
+
fontWeight: "400"
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## Brand & Style
|
|
21
|
+
|
|
22
|
+
Atelier Studio design system. A clean, structured theme with Italianno and Playfair Display and Space Mono typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
|
|
23
|
+
|
|
24
|
+
## Colors
|
|
25
|
+
|
|
26
|
+
- **comp-bg** (oklch(0.95 0.03 70)): Use for backgrounds.
|
|
27
|
+
- **comp-text** (oklch(0.25 0.04 30)): Use for text content.
|
|
28
|
+
- **comp-border** (oklch(0.25 0.04 30 / 0.15)): Use for borders and dividers.
|
|
29
|
+
- **comp-accent** (oklch(0.65 0.18 55)): Use for primary actions and accents.
|
|
30
|
+
- **comp-accent-text** (oklch(1.00 0 0)): Use for text content.
|
|
31
|
+
- **comp-muted** (oklch(0.50 0.04 30)): Use for secondary/muted content.
|
|
32
|
+
- **color-background** (oklch(0.96 0.03 70)): Use for backgrounds.
|
|
33
|
+
- **comp-accent-secondary** (oklch(0.60 0.15 40)): Use for primary actions and accents.
|
|
34
|
+
|
|
35
|
+
## Typography
|
|
36
|
+
|
|
37
|
+
Load fonts from Google Fonts: Italianno, Playfair Display, Space Mono. Use display=optional.
|
|
38
|
+
Primary body font: 'Playfair Display', serif.
|
|
39
|
+
|
|
40
|
+
## Components
|
|
41
|
+
|
|
42
|
+
Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.
|
package/themes/atlas.md
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Atlas Reference
|
|
3
|
+
colors:
|
|
4
|
+
comp-bg: "oklch(1.00 0 0)"
|
|
5
|
+
comp-text: "oklch(0.13 0 0)"
|
|
6
|
+
comp-border: "oklch(0.93 0 0)"
|
|
7
|
+
comp-accent: "oklch(0.62 0.24 25)"
|
|
8
|
+
comp-accent-text: "oklch(0.13 0 0)"
|
|
9
|
+
comp-muted: "oklch(0.66 0 0)"
|
|
10
|
+
color-background: "oklch(1.00 0 0)"
|
|
11
|
+
atlas-brand-bg: "oklch(0.62 0.24 25)"
|
|
12
|
+
atlas-brand-border: "oklch(0 0 0 / 0.08)"
|
|
13
|
+
atlas-brand-hover: "oklch(0 0 0 / 0.05)"
|
|
14
|
+
typography:
|
|
15
|
+
body-md:
|
|
16
|
+
fontFamily: var(--font-sans)
|
|
17
|
+
fontSize: 1rem
|
|
18
|
+
fontWeight: "400"
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
## Brand & Style
|
|
22
|
+
|
|
23
|
+
Atlas Reference design system. A clean, structured theme with system typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
|
|
24
|
+
|
|
25
|
+
## Colors
|
|
26
|
+
|
|
27
|
+
- **comp-bg** (oklch(1.00 0 0)): Use for backgrounds.
|
|
28
|
+
- **comp-text** (oklch(0.13 0 0)): Use for text content.
|
|
29
|
+
- **comp-border** (oklch(0.93 0 0)): Use for borders and dividers.
|
|
30
|
+
- **comp-accent** (oklch(0.62 0.24 25)): Use for primary actions and accents.
|
|
31
|
+
- **comp-accent-text** (oklch(0.13 0 0)): Use for text content.
|
|
32
|
+
- **comp-muted** (oklch(0.66 0 0)): Use for secondary/muted content.
|
|
33
|
+
- **color-background** (oklch(1.00 0 0)): Use for backgrounds.
|
|
34
|
+
- **atlas-brand-bg** (oklch(0.62 0.24 25)): Use for backgrounds.
|
|
35
|
+
|
|
36
|
+
## Typography
|
|
37
|
+
|
|
38
|
+
Primary body font: var(--font-sans).
|
|
39
|
+
|
|
40
|
+
## Components
|
|
41
|
+
|
|
42
|
+
Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: Broadsheet
|
|
3
|
+
typography:
|
|
4
|
+
body-md:
|
|
5
|
+
fontFamily: Helvetica Neue
|
|
6
|
+
fontSize: 1rem
|
|
7
|
+
fontWeight: "400"
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## Brand & Style
|
|
11
|
+
|
|
12
|
+
Broadsheet design system. A clean, structured theme with system typography. Use this design system\'s color tokens, spacing, and typographic choices consistently across all generated components. This theme **respects the visitor's system color scheme** — light by default, with a dark variant that auto-applies on `@media (prefers-color-scheme: dark)`. Apply both color sets via CSS variables in a `<style>` block; never hard-code one mode only.
|
|
13
|
+
|
|
14
|
+
## Typography
|
|
15
|
+
|
|
16
|
+
Primary body font: 'Helvetica Neue', Helvetica, Arial, sans-serif.
|
|
17
|
+
|
|
18
|
+
## Components
|
|
19
|
+
|
|
20
|
+
Apply the color tokens and typography consistently to all interactive elements (buttons, inputs, cards, modals). Ensure sufficient contrast between text and background colors for accessibility.
|