@compilr-dev/sdk 0.17.7 → 0.17.8
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.
|
@@ -35,12 +35,16 @@ export const canvasSkill = defineSkill({
|
|
|
35
35
|
|
|
36
36
|
1. **Clarify only if needed.** If the request is concrete, go straight to authoring. If the subject or type is ambiguous, ask ONE short question (what should it show, or which type) — do not run a long interview.
|
|
37
37
|
|
|
38
|
-
2. **
|
|
38
|
+
2. **Build the canvas in small steps — never one giant tool call.** A canvas is HTML/SVG you emit as tool arguments; a single very large \`canvas_write\` can overrun the output limit, get cut off mid-arguments, and fail. So author it incrementally, and emit each tool call immediately with NO prose preamble (narration competes with the HTML for the same output budget):
|
|
39
|
+
- **2a. First \`canvas_write\`** (type, title, html) = a COMPACT skeleton: the \`<style>\` block, the overall layout, and just the first section or heading. This is the ONLY way to create a canvas — describing it in chat does nothing.
|
|
40
|
+
- **2b. Then \`canvas_edit\` (operation=append)** to add each remaining section, one call per section. The preview grows as you go, and every call stays small and reliable. (You can also leave \`<!-- placeholder -->\` markers in 2a and str_replace them.)
|
|
41
|
+
- Put the whole thing in one \`canvas_write\` ONLY if it is genuinely small (a single stat card / short poster).
|
|
42
|
+
|
|
43
|
+
HTML constraints for every write:
|
|
39
44
|
- Do NOT include \`<html>\`, \`<head>\`, \`<meta>\`, \`<!doctype>\`, or your own CSP — the host injects the sandbox and CSP. Just the body content + a \`<style>\` and optional \`<script>\`.
|
|
40
45
|
- The sandbox is \`allow-scripts\` with NO same-origin and CSP \`default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:\`. So: inline \`<style>\`/\`<script>\` only, no external fonts/CSS/JS/network, no remote images (use inline SVG or data: URIs).
|
|
41
46
|
- Make it look intentional: a clear grid, strong type scale, generous spacing, a small cohesive palette. Prefer inline SVG for shapes/charts/icons.
|
|
42
|
-
- For a **carousel**, wrap each slide in \`<section data-sheet>…</section
|
|
43
|
-
- **Build in steps for anything rich — do NOT try to emit a huge HTML document in one canvas_write.** A single very large tool call can be truncated and silently dropped. Instead: first \`canvas_write\` a COMPACT version — the \`<style>\` block plus the overall structure and the first section or two. Then use \`canvas_edit\` (operation=append, or str_replace to fill placeholders) to add the remaining sections one at a time. Each call stays small and reliable, and the preview grows as you go.
|
|
47
|
+
- For a **carousel**, wrap each slide in \`<section data-sheet>…</section>\` — a natural unit to add one per \`canvas_edit\` append.
|
|
44
48
|
|
|
45
49
|
3. **Add a Tweaks controls manifest when it helps** (the \`controls\` argument). Each control is \`{ type, param, label, default, …type config }\` where type ∈ slider | number | toggle | select | color | text. Bind params in your HTML three ways:
|
|
46
50
|
- CSS custom property: use \`var(--param)\` in your styles (the host sets \`--param\` on the root).
|
|
@@ -54,7 +58,8 @@ export const canvasSkill = defineSkill({
|
|
|
54
58
|
5. **After writing, tell the user what you made in one line** and point them at the Tweaks they can adjust. The canvas opens in its own tab.
|
|
55
59
|
|
|
56
60
|
## Rules
|
|
57
|
-
- CALL THE TOOL
|
|
61
|
+
- CALL THE TOOL — don't describe the HTML you "would" write and stop. A canvas only exists once the tool succeeds.
|
|
62
|
+
- Keep every tool call SMALL. Emit \`canvas_write\`/\`canvas_edit\` with no prose preamble, and split rich canvases across several small calls (step 2). One huge call risks being cut off at the output limit.
|
|
58
63
|
- Keep \`html\` self-contained and within the sandbox limits above — anything that needs the network or same-origin will silently fail to render.
|
|
59
64
|
- One canvas per request unless the user asks for several.`,
|
|
60
65
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@compilr-dev/sdk",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.8",
|
|
4
4
|
"description": "Universal agent runtime for building AI-powered applications",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
"node": ">=20.0.0"
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
|
-
"@compilr-dev/agents": "^0.6.
|
|
75
|
+
"@compilr-dev/agents": "^0.6.1",
|
|
76
76
|
"@compilr-dev/logger": "^0.1.0",
|
|
77
77
|
"ajv": "^6.14.0",
|
|
78
78
|
"yaml": "^2.8.4"
|