@compilr-dev/sdk 0.17.5 → 0.17.6

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.
@@ -233,6 +233,16 @@ export const CAPABILITY_PACKS = {
233
233
  estimatedPromptTokens: 150,
234
234
  estimatedToolTokens: 1500,
235
235
  },
236
+ canvas: {
237
+ id: 'canvas',
238
+ label: 'Visual Canvas',
239
+ tools: ['canvas_write', 'canvas_edit', 'canvas_list', 'canvas_get', 'canvas_delete'],
240
+ readOnly: false,
241
+ promptModules: ['platform-tool-hints'],
242
+ promptSnippet: 'Visual canvases (infographic/carousel/board) rendered from sandboxed HTML/SVG. Create/replace with canvas_write (raw HTML only — host injects the CSP; inline <style>/<script> only, no network/remote assets; optional Tweaks controls manifest). EDIT via canvas_get (outline=true or startLine/maxLines) then canvas_edit (str_replace/append/prepend) — never re-send the whole document.',
243
+ estimatedPromptTokens: 150,
244
+ estimatedToolTokens: 1500,
245
+ },
236
246
  plans: {
237
247
  id: 'plans',
238
248
  label: 'Planning',
@@ -443,6 +453,7 @@ export const FORBIDDEN_PACK_SUGGESTIONS = {
443
453
  backlog_write: '$pm',
444
454
  backlog_read: '$pm',
445
455
  documents: '$pm',
456
+ canvas: '$default',
446
457
  plans: '$pm',
447
458
  search: '$arch',
448
459
  dependencies: '$arch',
@@ -0,0 +1,7 @@
1
+ /**
2
+ * Canvas Skills
3
+ *
4
+ * canvas — author and edit a visual canvas (infographic, carousel, or board)
5
+ * rendered from sandboxed HTML/SVG, optionally with live "Tweaks" controls.
6
+ */
7
+ export declare const canvasSkill: import("@compilr-dev/agents").Skill;
@@ -0,0 +1,59 @@
1
+ /**
2
+ * Canvas Skills
3
+ *
4
+ * canvas — author and edit a visual canvas (infographic, carousel, or board)
5
+ * rendered from sandboxed HTML/SVG, optionally with live "Tweaks" controls.
6
+ */
7
+ import { defineSkill } from '@compilr-dev/agents';
8
+ // =============================================================================
9
+ // /canvas — visual canvas authoring
10
+ // =============================================================================
11
+ export const canvasSkill = defineSkill({
12
+ name: 'canvas',
13
+ description: 'Author or edit a visual canvas — an infographic, a slide carousel, or an infinite board — rendered ' +
14
+ 'from HTML/SVG in a sandboxed preview, optionally with live "Tweaks" controls the user can adjust. ' +
15
+ 'Use when the user wants something visual: a diagram, poster, stat card, one-pager, slide deck, or ' +
16
+ 'explainer graphic, rather than prose or a code file.',
17
+ tags: ['visual', 'canvas', 'design'],
18
+ prompt: `You are in CANVAS MODE. Your job is to produce a VISUAL artifact — a rendered HTML/SVG canvas — not prose and not a code file. The canvas renders in a sandboxed preview and can carry live "Tweaks" the user adjusts.
19
+
20
+ ## When to Use
21
+ - The user wants something visual: infographic, poster, stat card, one-pager, diagram, explainer, slide deck.
22
+ - The user says "make a canvas", "visualize this", "turn this into slides", "draw me a…".
23
+
24
+ ## When NOT to Use
25
+ - They want prose (a doc, PRD, notes) → use the document tools / relevant writing skill.
26
+ - They want real application code/files on disk → use write_file / build.
27
+ - They want a data model → use the factory model tools.
28
+
29
+ ## Canvas types (pick one)
30
+ - **infographic** — a single self-contained composition (poster / stat card / one-pager). Default when unsure.
31
+ - **carousel** — multiple slide "sheets"; author each slide as a top-level \`<section data-sheet>…</section>\`.
32
+ - **board** — an infinite 2D board of loosely-placed elements.
33
+
34
+ ## STEPS
35
+
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
+
38
+ 2. **Author the content with canvas_write** (type, title, html). This is the ONLY way to create a canvas — describing it in chat does nothing. Write raw HTML/SVG for the \`html\` field:
39
+ - 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
+ - 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
+ - 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
+
44
+ 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:
45
+ - CSS custom property: use \`var(--param)\` in your styles (the host sets \`--param\` on the root).
46
+ - Text binding: \`<span data-bind="param"></span>\` gets replaced with the value.
47
+ - Visibility: \`[data-show="param"]\` shows/hides based on a toggle.
48
+ - For computed updates, define \`window.applyParams(values)\` in a \`<script>\` and read \`values.param\`.
49
+ Give every canvas at least 2–4 sensible controls (accent color, a headline size slider, a toggle to show/hide a section) so the user has something to play with. Seed \`default\` values that match what you authored.
50
+
51
+ 4. **To EDIT an existing canvas, do NOT re-send the whole document.** First call \`canvas_get\` with \`outline=true\` (or a \`startLine\`/\`maxLines\` slice) to find the exact snippet, then \`canvas_edit\` with \`operation=str_replace\` (old_str must be unique — include surrounding context — or set replace_all=true), or append/prepend. Reserve \`canvas_write\` with \`canvas_id\` for a full intentional rewrite.
52
+
53
+ 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.
54
+
55
+ ## Rules
56
+ - CALL THE TOOL. Do not describe the HTML you "would" write and stop — emit \`canvas_write\` with real content. A canvas only exists once the tool succeeds.
57
+ - Keep \`html\` self-contained and within the sandbox limits above — anything that needs the network or same-origin will silently fail to render.
58
+ - One canvas per request unless the user asks for several.`,
59
+ });
@@ -11,7 +11,8 @@ export { businessVisionSkill, marketAnalysisSkill, competitorAnalysisSkill, fina
11
11
  export { brandSetupSkill, contentStrategySkill, contentCalendarSkill, createContentSkill, contentReviewSkill, } from './content-skills.js';
12
12
  export { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseReviewSkill, } from './course-skills.js';
13
13
  export { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
14
+ export { canvasSkill } from './canvas-skills.js';
14
15
  /**
15
- * All platform-specific skills (34 total).
16
+ * All platform-specific skills (35 total).
16
17
  */
17
18
  export declare const platformSkills: Skill[];
@@ -16,6 +16,8 @@ export { brandSetupSkill, contentStrategySkill, contentCalendarSkill, createCont
16
16
  export { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseReviewSkill, } from './course-skills.js';
17
17
  // Book
18
18
  export { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
19
+ // Canvas (visual)
20
+ export { canvasSkill } from './canvas-skills.js';
19
21
  // Import all for the aggregate array
20
22
  import { designSkill, sketchSkill, prdSkill, refineSkill, refineItemSkill, architectureSkill, sessionNotesSkill, buildSkill, scaffoldSkill, } from './software-skills.js';
21
23
  import { outlineSkill, literatureReviewSkill, draftSectionSkill, peerReviewSkill, researchScaffoldSkill, } from './research-skills.js';
@@ -23,8 +25,9 @@ import { businessVisionSkill, marketAnalysisSkill, competitorAnalysisSkill, fina
23
25
  import { brandSetupSkill, contentStrategySkill, contentCalendarSkill, createContentSkill, contentReviewSkill, } from './content-skills.js';
24
26
  import { curriculumDesignSkill, lessonPlanSkill, assessmentDesignSkill, courseReviewSkill, } from './course-skills.js';
25
27
  import { bookOutlineSkill, characterDesignSkill, plotThreadsSkill, sceneBreakdownSkill, bookReviewSkill, } from './book-skills.js';
28
+ import { canvasSkill } from './canvas-skills.js';
26
29
  /**
27
- * All platform-specific skills (34 total).
30
+ * All platform-specific skills (35 total).
28
31
  */
29
32
  export const platformSkills = [
30
33
  // Software (9)
@@ -67,4 +70,6 @@ export const platformSkills = [
67
70
  plotThreadsSkill,
68
71
  sceneBreakdownSkill,
69
72
  bookReviewSkill,
73
+ // Canvas (1)
74
+ canvasSkill,
70
75
  ];
@@ -284,6 +284,14 @@ export const TOOL_GROUPS = {
284
284
  readOnly: false,
285
285
  tier: 'meta',
286
286
  },
287
+ canvas: {
288
+ label: 'Visual Canvas',
289
+ // Canvas tools are defined in @compilr-dev/sdk (createPlatformTools), not in
290
+ // the agents-lib TOOL_NAMES registry, so they are referenced by literal name.
291
+ tools: ['canvas_write', 'canvas_edit', 'canvas_list', 'canvas_get', 'canvas_delete'],
292
+ readOnly: false,
293
+ tier: 'meta',
294
+ },
287
295
  plans: {
288
296
  label: 'Planning',
289
297
  tools: [
@@ -514,6 +522,7 @@ export const TOOL_PROFILES = {
514
522
  'backlog_read',
515
523
  'backlog_write',
516
524
  'documents',
525
+ 'canvas',
517
526
  'plans',
518
527
  'artifacts',
519
528
  'anchors',
@@ -553,6 +562,7 @@ export const TOOL_PROFILES = {
553
562
  'project',
554
563
  'search',
555
564
  'documents',
565
+ 'canvas',
556
566
  'web',
557
567
  'factory_models',
558
568
  ],
@@ -608,6 +618,7 @@ export const TOOL_PROFILES = {
608
618
  'dependencies',
609
619
  'backlog_read',
610
620
  'documents',
621
+ 'canvas',
611
622
  'plans',
612
623
  'artifacts',
613
624
  'anchors',
@@ -631,6 +642,7 @@ export const TOOL_PROFILES = {
631
642
  'backlog_read',
632
643
  'backlog_write',
633
644
  'documents',
645
+ 'canvas',
634
646
  'plans',
635
647
  'artifacts',
636
648
  'anchors',
@@ -652,6 +664,7 @@ export const TOOL_PROFILES = {
652
664
  'backlog_read',
653
665
  'backlog_write',
654
666
  'documents',
667
+ 'canvas',
655
668
  'artifacts',
656
669
  'anchors',
657
670
  'web',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@compilr-dev/sdk",
3
- "version": "0.17.5",
3
+ "version": "0.17.6",
4
4
  "description": "Universal agent runtime for building AI-powered applications",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",