@compilr-dev/sdk 0.17.8 → 0.17.9
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.
|
@@ -43,7 +43,8 @@ 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
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. Bind params in your HTML three ways:
|