@compilr-dev/sdk 0.17.8 → 0.17.10
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/dist/skills/canvas-skills.js +10 -7
- package/package.json +1 -1
|
@@ -43,15 +43,18 @@ export const canvasSkill = defineSkill({
|
|
|
43
43
|
HTML constraints for every write:
|
|
44
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>\`.
|
|
45
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).
|
|
46
|
-
-
|
|
46
|
+
- **Match the app theme by default.** The host injects its live theme palette as CSS variables you MUST use instead of hardcoded colors: \`var(--canvas-bg)\` (page background), \`var(--canvas-fg)\` (text), \`var(--canvas-accent)\` and \`var(--canvas-secondary)\` (highlights), \`var(--canvas-muted)\` (secondary text), \`var(--canvas-border)\` (lines), \`var(--canvas-card)\` (raised surfaces). Do NOT set a fixed background like \`#0a0a0a\` — the canvas would then ignore the user's theme and not update when they switch it. Only hardcode specific colors when the user explicitly asks for a particular palette or brand.
|
|
47
|
+
- Make it look intentional: a clear grid, strong type scale, generous spacing. Use \`var(--canvas-accent)\` sparingly for emphasis. Prefer inline SVG for shapes/charts/icons (fill/stroke with the theme vars).
|
|
47
48
|
- For a **carousel**, wrap each slide in \`<section data-sheet>…</section>\` — a natural unit to add one per \`canvas_edit\` append.
|
|
48
49
|
|
|
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.
|
|
50
|
-
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
50
|
+
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.
|
|
51
|
+
- **⚠️ EVERY control you declare MUST be bound in the HTML — a declared-but-unbound control is a dead knob that visibly does nothing when the user drags it. Declaring the control is only half the job; you MUST also reference its param.** Bind each param one of these ways:
|
|
52
|
+
- CSS custom property (most common): use \`var(--param)\` directly in your styles — e.g. a \`headline\` slider means \`font-size: var(--headline)\` (NOT a literal \`48px\`), an \`accent\` color means \`color: var(--accent)\`. The host sets \`--param\` on the root and updates it live. Include a unit in the CSS if the raw value is a number: \`font-size: calc(var(--headline) * 1px)\`.
|
|
53
|
+
- Text binding: \`<span data-bind="param"></span>\` — its text is replaced with the value.
|
|
54
|
+
- Visibility: \`[data-show="param"]\` — shown/hidden by a toggle's value.
|
|
55
|
+
- Computed: define \`window.applyParams(values)\` in a \`<script>\` and read \`values.param\` for anything the three declarative ways can't express.
|
|
56
|
+
- Give every canvas at least 2–4 sensible controls (accent color, a headline size slider, a toggle to show/hide a section). Seed \`default\` values that MATCH what you authored (a slider default of 48 means the HTML's initial \`var(--headline)\` should read 48).
|
|
57
|
+
- **Before finishing, re-check: is each control's \`param\` actually referenced in the HTML?** If not, either bind it or drop the control — never ship a dead knob.
|
|
55
58
|
|
|
56
59
|
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.
|
|
57
60
|
|